17. [基础]v-for列表循环详细讲解-1
使用 Vue 的时候循环是最常用的一种操作,虽然我们在教程[初识]
阶段已经简单讲解过了v-for
的使用方法,但并不全面。下面,我们将使用两篇文章详细讲解v-for
的具体使用方法。
v-for 循环数组的方法
v-for
最常用的功能就是循环数组,先来看一个数组循环的例子,我们新建一个Demo17.html
的页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@next" ></script> </head> <body> <div id="app"></div> </body> <script> const app=Vue.createApp({ data(){ return{ } }, methods:{ }, template:`` }) const vm=app.mount("#app") </script> </html>
也就是最基本的一个 Vue 文件结构。然后在data
中声明一个数组,数组叫做listArray
,代码如下:
data(){ return{ listArray:['初级','中级','高级'] } },
data 中数组写完后,现在要作的是在template
中循环出这些数组,这里当然使用v-for
,代码如下:
template:` <ul> <li v-for="item in listArray">{{item}}</li> </ul> `
上面代码写完后在浏览器中预览效果,可以看到,已经如我们所愿,在页面渲染出了列表。在v-for
渲染数组时中还可以加入索引index
,也就是 数组的下标。
template:` <ul> <li v-for="(item,index) in listArray">[{{index}}]{{item}}</li> </ul> `
这些就是最基本v-for
循环数组的知识。
关于循环时的 key 值
为了提高循环时性能,在数组其中一项变化后,整个数组不进行全部重新渲染,Vue 提供了绑定key
值的使用方法,目的就是增加渲染性能,避免重复渲染。
为了理解这个概念,先编写出一个按钮,然后每次点击按钮后向数组中增加push
一个新值。
methods:{ handleChangeBtnClick(){ this.listArray.push('mybj123.com') }, }, template:` //...... <button @click="handleChangeBtnClick">点我改变</button> `
写完后,你到页面中预览,当你点击按钮时,表面上你看到增加了一个新的内容,实际整个列表都被重新渲染了。在实际工作中,这样的代码是不被允许的,它会降低页面的性能,在数据量变多的时候,用户用起来会变的卡顿。
这时,你可以加唯一性key
值,增加后 vue 就会辨认出哪些内容被渲染后并没有变化,而只渲染新变化的内容。
<ul> <li v-for="(item,index) in listArray" :key="index+item"> [{{index}}]{{item}} </li> </ul>
官方不建议使用索引index
为 key 值,但此时又为了保持唯一性,所以这里使用了index+item
进行绑定 key 值
v-for 循环对象的方法
v-for
不仅可以循环数组,还可以循环对象,使用方法基本和数组一样(但其中参数值是不一样的)。这里先在 data 中建立一个对象。代码如下:
data(){ return{ //...... listObject:{ DogOne:'黑背', DogTwo:'泰迪', DogThree:'金毛' } } },
在模板中进行循环的时候,为了更好的语义化,我们把参数改为了value
、key
和index
,然后进行循环。
<ul> <li v-for="(value,key,index) in listObject" :key="key"> [{{index}}]{{value}}-{{key}} </li> </ul>
写完后可以到浏览器中预览,也是可以得到你想要的结果的。
好了,这就是这篇文章的全部内容了。希望你能动手练习一下这些内容,因为他们在工作后基本每天都在使用。下篇文章继续讲解如何v-for
循环列表时的一些注意事项。
码云笔记 » 17. [基础]v-for列表循环详细讲解-1