- v-for循环数组的方法
- 关于循环时的key值
- v-for循环对象的方法
欲速则不达，稳中求胜。
使用Vue的时候循环是最常用的一种操作，虽然我们在教程[初识]阶段已经简单讲解过了v-for的使用方法，但并不全面。下面，我们将使用两篇文章详细讲解v-for的具体使用方法。
v-for循环数组的方法DOCTYPE html>
Document
const app=Vue.createApp({
data(){
return{
}
},
methods:{
},
template:``
})
const vm=app.mount("#app")
最基本的一个Vue文件结构，然后在data中声明一个数组，数组叫做listArray。
代码如下：
data(){
return{
listArray:['初级','中级','高级']
}
},
data中数组写完后，现在要作的是在template中循环出这些数组，这里当然使用v-for。
代码如下：
template:`
{{item}}
`
上面代码写完后在浏览器中预览效果，可以看到，已经如我们所愿，在页面渲染出了列表。在v-for渲染数组时中还可以加入索引index，也就是 数组的下标。
template:`
[{{index}}]{{item}}
`
这些就是最基本v-for循环数组的知识。
为了提高循环时性能，在数组其中一项变化后，整个数组不进行全部重新渲染，Vue提供了绑定key值的使用方法，目的就是增加渲染性能，避免重复渲染。
为了理解这个概念，先编写出一个按钮，然后每次点击按钮后向数组中增加push一个新值。
methods:{
handleChangeBtnClick(){
this.listArray.push('willem')
},
},
template:`
//......
点我改变
`
写完后，你到页面中预览，当你点击按钮时，表面上你看到增加了一个新的内容，实际整个列表都被重新渲染了。
在实际工作中，这样的代码是不被允许的，它会降低页面的性能，在数据量变多的时候，用户用起来会变的卡顿。
这时，你可以加唯一性key值，增加后vue就会辨认出哪些内容被渲染后并没有变化，而只渲染新变化的内容。
[{{index}}]{{item}}
官方不建议使用索引index为key值，但此时又为了保持唯一性，所以这里使用了index+item进行绑定key值。
DOCTYPE html>
Document
const app=Vue.createApp({
data(){
return{
listArray:['初级','中级','高级']
}
},
methods:{
handleChangeBtnClick(){
this.listArray.push('willem');
}
},
template:`
-
[{{index}}]{{item}}
点我改变
`
})
const vm=app.mount("#app")
v-for不仅可以循环数组，还可以循环对象，使用方法基本和数组一样（但其中参数值是不一样的）。这里先在data中建立一个对象。
代码如下：
data(){
return{
//......
listObject:{
DogOne:'黑背',
DogTwo:'泰迪',
DogThree:'金毛'
}
}
},
在模板中进行循环的时候，为了更好的语义化，我们把参数改为了value、key和index，然后进行循环。
[{{index}}]{{value}}-{{key}}
写完后可以到浏览器中预览，也是可以得到你想要的结果的。
DOCTYPE html>
Document
const app=Vue.createApp({
data(){
return{
newTodoText: 'willem',
todos: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
}
},
methods:{
handleChangeBtnClick(){
var num = this.nextTodoId++;
this.todos.push({
id: num,
title: this.newTodoText+num
})
}
},
template:`
点我改变
ID：{{value.id}}
title:{{value.title}}
`
})
const vm=app.mount("#app")
好了，这就是这篇文章的全部内容了。希望你能动手练习一下这些内容，因为他们在工作后基本每天都在使用。
下篇文章继续讲解如何v-for循环列表时的一些注意事项。
