指令:带有 v- 前缀 的 特殊 标签属性
1.v-html
可以解析style里的代码
<div id="app">
<div v-html="msg"></div> //就可以解析a标签和h3
</div>
<script>
const app = new Vue({
el:'#app',
data:{
msg:
<a href="http://www.itheima.com">黑马程序员</a>
<h3>学前端~来黑马!</h3>
}
})
</script>
2.v-show vs v-if（元素隐藏）
v-show：
-
作用:控制元素显示隐藏
-
语法: v-show="表达式" 表达式值 true 显示， false 隐藏
-
场景: 频繁切换显示隐藏的场景
-
v-show底层原理:切换css的display:none 来控制显示隐藏
V-if：
-
作用: 控制元素显示隐藏（条件渲染）
-
语法: v-if="表达式” 表达式值 true 显示， false 隐藏
-
场景:要么显示，要么隐藏，不频繁切换的场景
-
v-if 底层原理:根据 判断条件 控制元素的 创建 和 移除（条件渲染）
<div id="app">
<div v-show="flag"class="box">我是v-show控制的盒子</div>
<div v-if="flag"class="box">我是v-if控制的盒子</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
flag: false //隐藏时才看出区别
}
})
</script>
3.v-else v-else-if
1.作用: 辅助 v-if 进行判断渲染
2.语法:v-else v-else-if="表达式"
3.注意: 需要紧挨着 v-if 一起使用
<div id="app">
<p v-if="gender === 1">性别:男</p> //注意这里的判断等于是===
<p v-else>性别:女</p> //v-else不能单独使用
<hr>
<p v-if="score >= 90">成绩评定A:奖励电脑一台 </p>
<p v-else-if="score >= 70">成绩评定B:奖励周末</p>
<p v-else-if="score >= 60">成绩评定C:奖励零食</p>
<p v-else>成绩评定D:惩罚一周不能玩手机</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
gender:2 //决定了渲染性别的判断
score:80 //决定了渲染成绩的判断
}
})
</script>
4.v-on
1.作用: 注册事件=添加监听+提供处理逻辑
2.语法:
-
v-on:事件名="内联语句"（只适用于简单逻辑的代码）
-
v-on:事件名="methods中的函数名"
//v-on:事件名="内联语句"
<div id="app">
<button v-on:click="count--"> - </button> //click是点击事件，可换别的
<span>{{ count }}</span>
<button v-on:click="count = count + 2"> + </button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
count:100
}
})
</script>
//简写：把v-on:换成@
@事件名
<button @click="count--"> - </button>
//v-on:事件名="methods中的函数名"
const app = new Vue({
el:'#app',
data:{
// 提供数据
count:100
},
methods:{
//提供处理逻辑函数
fn(){
console.log('提供逻辑代码')
}
}
})
例题：<div id="app">
<button @click="fn">切换显示隐藏</button> //fn是methods的函数名
<h1 v-show="isshow">黑马程序员</h1>
</div>
<script>
const app(实例名) = new Vue({
el:'#app',
data:{
isShow: true
},
methods:{
fn(){ //被执行的方法
app.isShow = !isShow //完成来回切换
//这里面是不能直接获取data里的数据的，要通过this指向vue实例
this.isShow = !this.isShow //改实例名后照样能用
}
}
})
</script>
3.调用传参
<button @click="fn(参数1,参数2)"> //分别对应以下的a和b
按钮
</button>
const app = new Vue({
el:'#app'
methods:{
fn(a，b){
console.log('这是一个fn函数')
}
}
})
例题：
<div id="app">
<div class="box">
<h3>小黑自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
</div>
<p>银行卡余额:{{ money }}元</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
money: 100
},
methods:{
buy(price){ //实现不同金额的传参
this.money -= price
}
}
})
</script>
5.v-bind
-
作用:动态的设置html的标签属性 → src url title ···
-
语法: v-bind:属性名="表达式" 把这个表达式算出来的值赋值给属性名
-
简写形式: : 属性名="表达式"
<d1v id= "app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
</div>
<script>
const app = new Vue({
el:'#app',
data:{
imgUrl:'./imgs/10-02.png', //动态设置了图片
msg:'hello 波仔'
}
})
</script>
简写：
<img :src="imgUrl" :title="msg" alt="">
例题：图片切换
核心思路分析: ① 数组存储图片路径 →[图片1，图片2，图片3，….] ② 准备下标 index，数组[下标]→ v-bind 设置 src 展示图片→>修改下标切换图片
<div id="app">
<button v-show="index>0" @click="index--">上一页</button> //设置点击事件 index>0的时候才显示，否则隐藏
<div>
//把图片动态渲染 ,通过数组下标访问每一项
<img :src="list[index]" alt="">
</div>
<button v-show="index<list.Length-1" @click="index++">下一页</button>
//下标到达最大值的时候隐藏 ，小于最大值则显示
</div>
<script>
const app = new Vue({
el:'#app',
data:{
index:0, //设置动态下标
list:[
./imgs/11-00.gif',
./imgs/11-01.gif',
./imgs/11-02.gif',
./imgs/11-03.gif',
./imgs/11-04.png',
./imgs/11-05.png,
]
}
})
</script>
v-bind 对于样式控制的增强-操作class
语法:class="对象/数组" ① 对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类
<div class="box":class="{ 类名1:布尔值，类名2:布尔值}"></div>
② 数组 →数组中所有的类，都会添加到盒子上，本质就是一个 class 列表:
<div class="box" :class="[ 类名1，类名2，类名3]"></div>
v-bind 对于样式控制的增强-操作style
语法 :style="样式对象"
<div class="box" :style="{ CSS属性名1:CSS属性值，CSS属性名2:CSS属性值}"></div>
6.v-for
1.作用:基于数据循环，多次渲染整个元素---数组，对象，数字
2.遍历数组语法: v-for="(item,index) in 数组" item 每一项，index 下标
<div id="app">
<h3>小黑水果店</h3>
<ul>
<li v-for="(item, index)in list"> //index不需要的话可以省略
{{ item }}-{{ index }} //item获取每一项的名字 index获取下标
</1i>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
list:['西瓜','苹果','鸭梨','榴莲']
</script>
例题：
<div id="app">
<h3>小黑的书架</h3>
<ul>
<li v-for="(item, index)in booksList" :key="item.id">//加上key更完善
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<!-- 注册点击事件→ 通过 id 进行删除数组中的 对应项 -->
<button @click="del(item.id)">删除</button>
</1i>
</ul>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
booksList:[
{ id: 1,name:'《红楼梦》',author:'曹雪芹'},
{ id: 2,name:'《西游记》',author:'吴承恩'},
{ id: 3,name:'《水浒传》',author:'施耐庵'},
{ id: 4,name:'《三国演义》',author:'罗贯中'}
]
},
//提供删除函数方法
methods:{
del(id){
// console.log('删除'，id)
// 通过 id 进行删除数组中的 对应项 →filter(不会改变原数组)
// filter:根据条件，保留满足条件的对应项，得到一个新数组。
//console.log(this.booksList.filter(item =>item.id!=id))
this.booksList = this.booksList.filter(item => item.id !== id)
}
}
})
</script>
3.v-for中的key
语法:key属性="唯一标识" 作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
注意点: 1.key 的值只能是 字符串 或 数字类型 2.key 的值必须具有 唯一性 3.推荐使用 id 作为 key(唯一)，不推荐使用 index作为 key(会变化，不对应)
<li v-for="(item, index) in xxx" :key="唯一值">
7.v-model(双向数据绑定)
作用:给 表单元素 使用，双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
-
数据变化→视图自动更新
-
视图变化→数据自动更新
可以快速[获取]或[设置]表单元素的内容
账户:<input type="text" v-model="username"><br><br>
密码:<input type="password" v-model="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
<script>
const app = new Vue({
el:'#app',
data:{
username:'',
password:''
},
//定义登录和重置的方法
methods:{
login(){
console.log(this.username,this.password) //直接获取就行
},
reset(){
this.username =''
this.password =''
}
}
})
</script>
v-model(应用于其他表单元素)
-
输入框 input:text
-
文本域 textarea
-
复选框 input:checkbox
-
单选框 input:radio
-
下拉菜单 select
扫一扫
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
