vue基础课程学习之列表渲染（九）
#数组的循环
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
在v-for 块中，我们可以访问所有父作用域的property。V-for 还支持一个可选的第二个参数，即当前项的索引
注意：item in items 或 （item ，index）in items循环数组时语法的说明
Items: 源数据数组
Item :被迭代的数组元素的别名
In：分隔符 也可以用of 代替
Index：索引
即：（被迭代的数组元素 ，索引） 分隔符 源数据数组
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for=“item of items”></div>
# 在v-for 里使用对象
你也可以用 v-for 来遍历一个对象的 property。
你也可以提供第二个的参数为 property 名称 (也就是键名)：
还可以用第三个参数作为索引：
注意：value in objects 或 (value ,name) in objects或 (value ,name ,index) in objectsv-for中使用对象时语法的说明
value: 对象的值
objects:对象
In：分隔符 也可以用of 代替
Name：对象的property名称也成为键值
Index：索引
即：（对象的值 ，键值 ，索引） 分隔符 对象
在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
#<template>元素上使用v-for
类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。
<template v-for=”(value ,name ,index) of objects”>
<div>索引：{{index}}</div>
<div>键值：{{name}}</div>
<div>内容：{{value}}</div>
</template>
#在组件上使用v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for。
2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。
#数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: ‘Baz’ })。
（1）.push() ：在原有数组最后添加一条数据的方法
（2）.pop（）：删除最后一条数据并返回删除的数据并返回数据的长度
（3）.shift（）：删除第一条数据并返回删除的数据与pop（）方法删除数据位置相反
（4）.unshift（）：在数据的头部添加数据并且返回数组的长度与push（）添加数据位置相反
（5）.splice（）：通过索引来删除对应的数据并返回删除的数据
如：splice(0,2)是删除第一条与第二条即索引为0、1的数据
（6）.sort（）：排序，按正常顺序排序如：number数按从小到大排序
（7）.reverse（）：倒序排列，如：原来数据排列式9 5 2 4 6 1 7 3 使用reverse（）之后数组整体倒过来
#替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
（1）. Filter（）：是过滤并返回过滤后的新数组
（2）.concat（）
（3）.slice（）： 筛选的方法，数组的索引是从零开始的
当然我们可以将筛选出来的新数组可以替换旧数组，也会更新
注意事项：
由于JavaScript的限制，Vue不能检测以下数组的变动即页面不会更新
- 当你通过用索引的方法设置一个数组项时，vm.numbers[indexOfItem] = newValue
- 当你修改数组的长度时。例如：vm.numbers.length = newLength
图1
图2
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
Vue.set(vm.someObject, ‘b’, 2)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.someObject,’b’,2)
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119160.html
