文章讲解“vue.js指令v-show”，本篇文章讲解“vue.js指令v-for”。v-forv-for循环语法：1.循环数组1）v-for循环数组浏览器访问：2）获取数组索引每次循环还可以获取数组的索引：获取数组索引：浏览器访问：3）vue重定义了数组原型上的方法由于js中对数组操作的方法都不支持回调（es6之前），所以对于数组的操作Vue通过重写Array类型数据的原型（prototype）上的方法，来加入回调处理，得以实现数组数据的自动响应。这些方法包括：push()/pop()/shift()/unshift()/splice()/sort()/reverse()所以这里有一个特别要注意的操作就是vue不能检测到通过索引设置值的这个动作，看下面的错误的例子：当我们点了按钮一定以为页面会出现数字，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连载为卓象程序员原创，转载请联系卓象程序员
转载请注明：http://www.aierlanlan.com/rzgz/8947.html
