1. 条件判断
1.1 v-if/v-else-if/v-else
上面这三个指令与js中的条件语句if、else 、else if 用法类似
Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件
简单的案例演示:
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
score:60
},
methods:{
}
})
</script>
v-if原理:v-if后面的条件为false时,对应的元素及其子元素都不会被渲染,也就是根本不会有对应的标签出现
1.2 条件渲染案例
用户在登录时,可以切换用邮箱登录还是用户账号登录
如下图所示:
<div id="app">
<h2>这里给两个input输入框加上key属性</h2>
<h2>理由:Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素</h2>
<h2>案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了</h2>
<h2>如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且需要保证key的不同</h2>
<span v-if="type==='username'">
<label>用户账号:</label>
<input type="text" placeholder="用户账号" key="username-input">
</span>
<span v-else>
<label>邮箱地址:</label>
<input type="text" placeholder="邮箱地址" key="mail-input">
</span>
<button @click="typeChange">点击切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
type:'username'
},
methods:{
typeChange() {
this.type = this.type=='username'?'mail':'username'
}
}
})
</script>
1.3 v-show
v-show和v-if功能类似,也是决定一个元素是否渲染,但是原理上不同,看下面一个案例:
<div id="app">
<button @click="changeShow">切换</button>
<span v-show="isShow">要不要展示呢</span>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isShow:true
},
methods:{
changeShow() {
this.isShow = !this.isShow;
}
}
})
</script>
从上图中我们可以看出,当点击切换,v-show条件为false时,仅仅是将元素的display属性设置为none而已。
那么在平时开发中,我们如何选择v-show和v-if呢?
- 当需要在显示和隐藏中来回频繁切换时,用v-show
- 当只有一次切换时,通常用v-if
2. 循环遍历
2.1 v-for 遍历数组
当我们有一组数据需要渲染时,就用v-for来完成。
v-for的语法类型与js中的for循环
格式:item in items
需要注意的是:在遍历的过程中,既可以使用数组的索引,也可以不使用,代码如下:
<div id="app">
<h2>不用索引</h2>
<ul>
<li v-for="book in books">{{book}}</li>
</ul>
<h2>使用索引</h2>
<ul>
<li v-for="(book,index) in books">{{index+1}}-{{book}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books:['java编程思想','java核心技术','并发编程实战','数学之美']
},
methods:{
}
})
</script>
效果如下:
在遍历过程中,如果我们需要拿到数组的索引,语法格式为:v-for=(item, index) in items
其中,index就是取出的item在数组中对应的索引值
2.2 v-for 遍历对象
v-for也可以用来遍历对象:
<div id="app">
<h2>遍历对象</h2>
<ul>
<li v-for="(val,key,index) in user">
{{val}}--{{key}}--{{index}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
user:{name:'van.shu',age:18,height:1.77}
},
methods:{
}
})
</script>
显示如下:
可以看出 v-for遍历对象,结构:v-for="(val,key,index) in obj
其中,第一个值val代表对象属性的值,第二个key代表对象的属性名称,第三个代表索引
2.3 组件的key属性
官方在推荐我们使用v-for的时候,给对应的元素和组件加上 :key 属性。
这是为什么呢?
当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点。
例如:希望可以在B和C之间加一个F
- 如果没有 :key 的话,Vue底层默认会把C更新成F,D更新成C,E更新成D,最后再插入E
- 但是如果加上 :key属性的话,Vue底层就会直接把F插入到B和C之间
如下图所示:
所以,key的作用主要是为了高效的更新虚拟DOM
2.4 检测数组更新
因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新
<div id="app">
<h2>哪些数组的方法是响应式的</h2>
<ul>
<li v-for="num in nums">{{num}}</li>
</ul>
<button @click="btnClick">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
nums:[1,2,3,4,5,1]
},
methods:{
btnClick() {
//push方法:在数组最后位置可以动态添加多个元素
this.nums.push(6,7,8)
//pop方法:删除数组最后一个元素
this.nums.pop()
//unshift方法:在数组的最前面位置动态添加多个元素
this.nums.unshift(4, 4, 4)
//shift方法:弹出数组中第一个元素
this.nums.shift()
//splice方法:可以传入多个参数
//作用:删除元素、插入元素、替换元素
//第一个参数:从第几个元素开始
//第二个参数:如果用于删除元素,则第二个参数传入的是你要删除几个元素,如果不填,默认删除后面所有的元素
//第二个参数:如果用于插入元素,则第二个参数传入0,后面继续填上你要添加的元素(可以是多个元素)
//第二个参数:如果用于替换元素,则第二个参数传入的是你要替换几个元素,后面填上的是你要替换后的元素
this.nums.splice(1, 3, 99, 100)
//sort方法:排序
this.nums.sort((a,b)=>b-a)
//reverse方法:反转
this.nums.reverse();
//这个方法也是响应式的
Vue.set(this.nums,0,999)
//注意:通过索引修改数组中的元素,不是响应式的
this.nums[0]=777
}
}
})
</script>