Vue基础之Vue列表渲染

列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名

基本用法：

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法

对象迭代 v-for：

你也可以用 v-for 通过一个对象的属性来迭代

你也可以提供第二个的参数为键名

第三个参数为索引

整数迭代 v-for：

v-for 也可以取整数。在这种情况下，它将重复多次模板

结果

组件 和 v-for：

在自定义组件里，你可以像任何普通元素一样用 v-for

然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props

不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用

key:

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值

数组更新检测:

变异方法：会改变原始数组,且会触发视图更新

push、pop、shift、unshift、splice、sort、reverse

重塑数组：不会改变原始数组,总是返回一个新数组

filter、concat、slice

显示过滤/排序结果：

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性
例如

只要number被修改，则会出发计算属性eventNumbers进行计算