上一篇文章讲解“vue.js指令v-show”，本篇文章讲解“vue.js指令v-for”。

---

v-for

v-for循环语法：

---

1. 循环数组

1）v-for循环数组

浏览器访问：

2）获取数组索引

每次循环还可以获取数组的索引：

获取数组索引：

浏览器访问：

3）vue重定义了数组原型上的方法

由于js中对数组操作的方法都不支持回调（es6之前），所以对于数组的操作Vue通过重写Array类型数据的原型（prototype）上的方法，来加入回调处理，得以实现数组数据的自动响应。

这些方法包括：push() / pop() / shift() / unshift() / splice() / sort() / reverse()

所以这里有一个特别要注意的操作就是vue不能检测到通过索引设置值的这个动作，看下面的错误的例子：

当我们点了按钮一定以为页面会出现数字100，2，3，但实际页面是不会有变化的，就像上面解释的，vue只能通过上面的几个数组方法来操作数组的值，所以正确的方式是：

浏览器访问：

splice是vue开发中最长用的一个数组方法，请牢记的他的语法，第一个参数代表要删除哪个索引上的值，第二个参数代表要删除几项，第三个参数代表要在第一个参数对应的索引上对数组的值进行替换。

---

2. 循环对象

浏览器访问：

循环对象时，可以获取对象的键与索引。

获取对象的键与索引：

浏览器访问：

---

3. 循环数字

v-for也可以循环整数。在这种情况下，它将重复多次模板，多用于生成时间模板。

v-for循环数字：

浏览器访问：

---

4. 循环字符串

循环字符串与循环数组类似，字符串中每一个字符为一项。

v-for循环字符串：

浏览器访问：

循环字符串时，也可以获取字符串索引。

获取字符串索引：

浏览器访问：

---

5. :key

默认每个循环的元素都相当于隐式的加了:key="$index"，$index是循环的索引，他的意义是当我们循环一个数组，然后打乱数组顺序，默认vue不会重新渲染每个节点，而是重新给每个节点赋值和赋属性值，虽然性能非常好，但是一些情况下比较失控。

比如之前input的例子，还有当对循环的每一项都加位移动画的时候，如果没有独立的key，那么你会发现动画会非预期的变化。

所以强烈建议给循环的每个元素都要key，除非你十分需要这个部分复用带来的性能，一般开发中很少遇到非要复用的情况。

注意：vue2.20版本后要求:key在v-for循环时必填。

---

6. 配合v-if

当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

浏览器访问：

Vue.js连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“vue.js指令v-on”