Vue 循环遍历 v-for

渲染一组数据的时候用 v-for

v-for的语法类似于JavaScript中的for循环

格式如下:item in items的形式

我们来看一个简单的案例:

Vue 循环遍历 v-for

如果在遍历的过程中不需要使用索引值

v-for="movie in movies"

依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie

如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?

语法格式:v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

v-for可以用户遍历对象:

比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。

<div> <ul> <li v-for="(value, key, index) in info"> {{index}}-{{value}}-{{key}} </li> </ul> </div> <script src=""></script> <script> const app = new Vue({ el: \'#app\', data: { info: { name: \'why\', age: 18, height: 1.88 } } }) </script> Array: (item,index) in Array

item 是数组的遍历

index 是数组的索引

可以用其它的参数代替,但是在后面也得写成一样的参数,尽量避免命名的冲突

更改数组

不能通过索引的方式更改数组,这样不会渲染页面

不能通过更改长度的方式更改数组,也不会渲染页面

检测数组更新

因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

Vue 循环遍历 v-for

obj: (value,key,index) in obj

value 对象的 value 值

key 对象的 key 值

index 对象的索引

更改对象

向对象内添加或者删除属性不会渲染页面

使用$set()方法

语法this.$set(obj, key, value)
- obj: 需要修改的对象
- key: 对象的key值
- value: 想添加或者修改的值
- 将 key 值改成索引也客园修改数组

Object.defineProperty

num:num is number

从 1 开始遍历到这个数字

String

遍历字符串的全部字母

key属性

只能用在Array和string中,值是唯一的

vue不会去改变原有的元素和数据,而是创建新的元素然后把新的数据渲染进去

在使用v-for的时候,vue里面需要我们给元素添加一个key属性,这个key属性必须是唯一的标识

给key赋值的内容不能是可变的,可以用索引添加

在写v-for的时候,都需要给元素加上一个key属性

key的主要作用就是用来提高渲染性能的!

key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)

Vue 循环遍历 v-for

注意,千万不要将 v-for 和 v-if 一起使用。 <div v-for=\'item in datas\' v-if=\'isShow\'></div>

v-for 的优先级始终比 v-if 高,无论先后顺序。

所以两个指令同时存在时总是先生成迭代逻辑,再在迭代逻辑中进行genIf的处理,最后在整个迭代里每项都进行一次判断,对性能造成浪费。

将v-if提取到v-for之外,如果判断参数出现在迭代数据项里,可以结合computed来过滤迭代项后再进行渲染

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgjdyj.html