1.v-for遍历数组
<ul>
<li v-for="item in items">{{item}}</li>
<li v-for="(item, index) in items">{{item}} - {{index}}</li>
<!-- ES6迭代器语法 -->
<li v-for="item of items">{{item}}</li>
</ul>
var app = new Vue({
el: "#app",
data: {
items: [1, 2]
}
});
2.v-for遍历对象
<ul>
<li v-for="item in items">{{item}}</li>
<li v-for="(item, key, index) in items">{{item}} - {{key}} - {{index}}</li>
<li v-for="item of items">{{item}}</li>
</ul>
var app = new Vue({
el: "#app",
data: {
items:{first:1, second:2}
}
});
v-for默认使用“就地复用”策略更新已渲染过的元素列表，为了跟踪每个节点，需要为每项提供一个唯一key，如：
<li v-for="(item, index) in items" :key="index"></li>
3.数组更新检测
- 变异方法(改变原始数组)：Vue重写了数组的push, pop, shift, unshift, splice, sort, reverse方法，会触发视图更新
- 非变异方法：filter, concat, slice等返回一个新数组，可用新数组赋值替换，触发视图更新
Vue不能检测以下变动：
vm.items[0] = 6; vm.items.length = 0;
替代方案：
Vue.set(vm.items, 0, 6);
4.对象更新检测
Vue不能检测对象属性的添加或删除,还需通过Vue.set方法
//或使用实例方法$set, $delete
Vue.set(app.items, "third", 3);
Vue.delete(app.items, "first");
//为已有对象添加多个属性,建议创建新对象,重新赋值
app.items = Object.assign({}, app.items, {first: 1, fourth: 4});
5.显示过滤/排序结果
建议使用计算属性得到一个数组过滤副本，嵌套循环不能使用计算属性的可以使用一个method返回副本
6.一段取值范围的v-for
<ul>
<!-- 输出：1~6 -->
<li v-for="n in 6">{{n}}</li>
</ul>
7.v-for on a <template>
<ul>
<template v-for="(item, key) in items">
<li>{{item}}</li>
<li>{{key}}</li>
</template>
</ul>
v-for优先级高于v-if，对于有条件的跳过循环，需要将v-if置于v-for元素外层
8.组件v-for
<!-- 组件有自己独立作用域，传递数据到组件要使用props，避免耦合 -->
<my-component v-for="item in items" :item="item" :key="item.id"></my-component>
2.20+组件使用v-for必须绑定key
