1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之列表渲染

Vue教程之列表渲染

v-for 是Vue用来遍历渲染一组数据的,例如数据数组,数据对象。

v-for 遍历数组

遍历的第一个值是数组内的元素,第二个是数组的索引。

普通元素

字符串数组

使用值范围

对象数据

v-for 遍历对象

遍历的第一个是对象的值,第二个是对象的key,第三个则是对象元素的索引。

数据更新

由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。

尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

因此当你利用中括号([])的方式直接设置一个数组或者对象的选项的时候,例如:vm.items[indexOfItem] = newValue,是无法在视图响应更新的,当然也会有其他无法侦听到的,例如数组的长度等等。

数组数据更新

所以我们需要使用以下的方法来规避此类问题,侦听数据数组的变化。

  • push() // 可向数组的末尾添加一个或多个元素,并返回新的长度。
  • pop() // 用于删除并返回数组的最后一个元素。
  • shift() // 用于把数组的第一个元素从其中删除,并返回第一个元素的值。
  • unshift() // 可向数组的开头添加一个或更多元素,并返回新的长度。
  • splice() // 向/从数组中添加/删除项目,然后返回被删除的项目。
  • sort() // 用于对数组的元素进行排序。
  • reverse() // 用于颠倒数组中元素的顺序。

实例演示:

对象数据更新

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

例如:

使用 set 方法更新对象数据元素。

v-for 和 v-if 一起使用

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用,但是我们的编辑器会给我们报错,因此推荐使用 template 标签来兼容这种问题。

当想要 v-if 的优先级高的时候,则交换以下 v-for 和 v-if 的位置即可,例如:

key

在介绍 v-if 的时候,我们也聊到了这个key,但是更多的时候,是介绍这个key的优点,那么这里我们说说,如果key使用不当,会造成什么样的bug。

Vue 默认会使用一种最大限度减少动态元素并且尽可能的尝试 就地修改 / 复用相同类型元素 的算法,也就是说,如果数据的顺序别改变或者打乱,Vue 不会移动DOM元素来匹配数据的顺序,而是就地修改每个元素,并且确保它们在每个索引位置正确渲染。

实例演示,这个是一个有bug的演示,方便了解 key 在 v-for 中的作用:

这篇文章对您有用吗? 2

我们要如何帮助您?

发表评论

邮箱地址不会被公开。 必填项已用*标注