目录
Vue的列表渲染指令为:v-for
1.v-for指令
v-for
指令是基于一个数组来渲染一个列表,其形式为:
v-for="item in items"
其中,items数组,item是数组迭代的子项。如下所示:
data(){
return {
nums: [1,2,3]
}
}
<ul>
<li v-for="item in nums" :key="item">{{item}}</li>
</ul>
在 v-for
中可以完整地访问父作用域内的属性和变量。
2.位置索引
v-for
支持使用可选的第二个参数表示当前项的位置索引
v-for="(item, index) in items"
如下:
<ul>
<li v-for="(item, index) in nums" :key="item">
{{index}} - {{item}}
</li>
</ul>
运行效果为:
- 0 - 1
- 1 - 2
- 2 - 3
3.v-for与对象
v-for
可以遍历一个对象的所有属性。形式为:
v-for="(value, key, index) in object"
key:表示属性名
value:属性值
遍历的顺序会基于对该对象调用 Object.keys()
的返回值来决定。如下所示:
data(){
return {
person:{
name: "lucky",
age: 18,
address: "China"
}
}
}
<ul>
<li v-for="(value, key, index) in person" :key="key">
{{index}}: {{key}} - {{value}}
</li>
</ul>
运行效果为:
- 0: name - lucky
- 1: age - 18
- 2: address - China
4.在v-for中使用范围值
v-for
可以直接接受一个整数值。在这种用例中,会将该模板基于 1...n
的取值范围重复多次。
<span v-for="n in 6" :key="n">{{ n }}</span>
运行效果为:
123456
5.在template上使用v-for
<template>
标签上可以使用 v-for
来渲染一个包含多个元素的块
<ul>
<template v-for="item in nums" :key="item">
<li>{{item}}</li>
</template>
</ul>
6.通过key管理状态
Vue默认按照“就地更新”的策略来更新渲染元素列表,不会跟踪每个节点。当元素列表顺序改变时,Vue不会随之移动DOM元素的顺序,默认模式是高效的,但是只适用于渲染的元素列表不依赖子组件状态或者临时DOM状态(例如表单输入值)的情况。
如下所示,未加key情况:
<script>
export default{
data(){
return {
nums: [1,2,3]
}
},
methods:{
insert(){
//在数组首位插入数据0
this.nums.unshift(0)
}
}
}
</script>
<template>
<div>
<ul>
<li v-for="item in nums">
<input type="checkbox" />{{item}}
</li>
</ul>
<button @click="insert">插入数据</button>
</div>
</template>
运行效果图如下所示,勾选数据2
点击按钮插入数据后,效果图如下:
可以看到,原本勾选的是2,新插入数据后,变成数字1被勾选了。
修改代码,将key加上:
<li v-for="item in nums" :key="item">
<input type="checkbox" />{{item}}
</li>
再次运行,将数字2勾选,然后点击按钮插入数据,可以看到数字2保持被勾选:
因此,推荐为v-for指令提供一个key。key绑定的值期望是一个基础类型的值,例如字符串或者number类型,不能使用对象作为key。
7.数组变化侦测
Vue 能够侦听响应式数组的变更方法,并在它们被调用时触发相关的更新。变更方法如下:
push() | 在数组末尾添加元素 |
pop() | 删除数组末位的元素 |
shift() | 删除数组首位元素 |
unshift() | 在数组首位添加一个元素 |
splice() | 表示删除元素、插入元素和替换远古三 第一个参数表示开始删除、插入或者替换元素的位置下标 删除元素:splice(参数1,参数2), 参数2表示要删除几个元素,如果参数2不写的话,表示会删除后面的所有元素 插入元素:splice(参数1,0,参数3...) 这里参数2传入0表示不删除元素(即插入元素),后面再跟要插入的数值 替换元素:splice(参数1,参数2,参数3...) 这里参数2填非0,表示要替换几个元素,后面跟要替换的数值 |
sort() | 排序数组,默认从小到大 |
reverse() | 翻转数组 |