当我们有一组数据需要进行渲染时, 我们就可以使用v-for来完成.
v-for的语法类似于JavaScript中的for循环.
格式如下: item in items的形式.
我们来看一个简单的案例:
如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
依次从movies中取出movie, 并且在元素的内容中, 我们可以使用Mustache语法, 来使用movie
如果在遍历的过程中, 我们需要拿到元素在数组中的索引值呢?
语法格式: v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值.
v-for可以用户遍历对象:
比如某个对象中存储着你的个人信息, 我们希望以列表的形式显示出来.
组件的key属性
官方推荐我们在使用v-for时, 给对应的元素或组件添加上一个:key属性.
为什么需要这个key属性呢(了解)?
这个其实和Vue的虚拟DOM的Diff算法有关系.
这里我们借用React's diff algorithm中的一张图来简单说明一下:
当某一层有很多相同的节点时, 也就是列表节点时, 我们希望插入一个新的节点
我们希望可以在B和C之间加一个F, Diff算法默认执行起来是这样的.
即把C更新成F, D更新成C, E更新成D, 最后再插入E, 是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点.
所以一句话, key的作用主要是为了高效的更新虚拟DOM.
检测数组更新
因为Vue是响应式的, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.
Vue中包含了一组观察数组编译的方法, 使用它们改变数组也会触发视图的更新.
能做到响应式的方法(更改了对象之后, 能够重新渲染):
push(): 把元素添加到数组的最后面, 可以添加多个元素.
pop(): 删除数组里最后一个元素
shift(): 删除数组里第一个元素
unshift(): 在数组最前面添加元素, 可以添加多个元素.
splice():
splice(start): 从第start位(包括start)开始删除元素
splice(start, length): 从第start位(包括start)开始删除length个元素
splice(start, length,'m','n','l'): 从第start位(包括start)开始删除length个元素, 并添加'm','n','l'在后面.
sort()
reverse()
还有一个vue的响应式方法: Vue.set(要修改的对象, 索引值, 要修改的值)
注:通过索引值修改数组中的元素不是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>ID:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!--v-for循环的时候, 绑定的key属性只能是number和string-->
<!--key在使用时, 必须使用v-bind来绑定key的值作为属性-->
<!--v-for删除元素之后的渲染机制: 删除一个就好, 如果不刷新, 就不重新渲染;页面上展示的是渲染之后的虚拟dom, 在第二种机制中,
我们把虚拟dom中所删除元素的索引传回给vue, 让vue对dom进行操作, 删除元素, 所以在这个过程中, 需要绑定key, 传key回给vue. 建议v-for都使用:key机制-->
<!--假如v-for有问题, 那么就应该要使用:key对元素进行标识-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">
id:{{item.id}}---name:{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: '李斯'},
{id: 2, name: '赵正'},
{id: 3, name: '赵高'},
{id: 4, name: '韩非'},
{id: 5, name: '荀子'},
]
},
methods: {
//添加方法
add(){
//push添加在最后面
/*this.list.push({id: this.id, name: this.name});*/
//unshift添加在最前面
this.list.unshift({id: this.id, name: this.name});
}
}
});
</script>
</body>
</html>