Vue.js列表渲染

<!-- 基本语法：item in items -->
<ul>
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

<!-- 带索引：第二个参数是索引 -->
<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

<!-- 使用 of 替代 in，效果相同 -->
<ul>
  <li v-for="item of items">
    {{ item }}
  </li>
</ul>
                                

<!-- 遍历对象属性值 -->
<ul>
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<!-- 遍历属性值和键名 -->
<ul>
  <li v-for="(value, key) in object">
    {{ key }}: {{ value }}
  </li>
</ul>

<!-- 遍历属性值、键名和索引 -->
<ul>
  <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
  </li>
</ul>
                                

<!-- 遍历数字范围 -->
<span v-for="n in 10">{{ n }} </span>

<!-- 注意：从1开始，不是0 -->
<span v-for="n in 5">{{ n }} </span>
<!-- 输出: 1 2 3 4 5 -->

<!-- 结合索引使用 -->
<span v-for="(n, index) in 5">{{ index }}:{{ n }} </span>
<!-- 输出: 0:1 1:2 2:3 3:4 4:5 -->
                                

<!-- 使用 template 渲染多个元素 -->
<template v-for="item in items">
  <li>{{ item.name }}</li>
  <li>{{ item.price }}</li>
</template>

<!-- 对比：不使用 template -->
<div v-for="item in items">
  <li>{{ item.name }}</li>
  <li>{{ item.price }}</li>
</div>
<!-- 会多出一个包裹的 div 元素 -->
                                

// 以下方法会触发视图更新
push()      // 向数组末尾添加元素
pop()       // 删除数组最后一个元素
shift()     // 删除数组第一个元素
unshift()   // 向数组开头添加元素
splice()    // 添加/删除/替换元素
sort()      // 排序数组
reverse()   // 反转数组

// 使用示例
vm.items.push({ message: '新项' });
vm.items.splice(0, 1); // 删除第一个元素
                                

// 以下方法不会触发视图更新
filter()    // 过滤数组
concat()    // 连接数组
slice()     // 截取数组

// 这些方法会返回新数组，需要重新赋值
vm.items = vm.items.filter(item => item.message.match(/Foo/));
vm.items = vm.items.concat([{ message: '新项' }]);
vm.items = vm.items.slice(1, 3);
                                

// Vue 不能检测以下对象更新
vm.obj.newProp = 'hi';  // 不会触发更新

// 使用 Vue.set 或 vm.$set
Vue.set(vm.obj, 'newProp', 'hi');
// 或
vm.$set(vm.obj, 'newProp', 'hi');

// 添加多个新属性
vm.obj = Object.assign({}, vm.obj, {
  newProp1: 'hi',
  newProp2: 'hello'
});

// 删除属性 (需要使用 Vue.delete 或 vm.$delete)
Vue.delete(vm.obj, 'oldProp');
// 或
vm.$delete(vm.obj, 'oldProp');
                                

// 不好的用法：v-if 在 v-for 内部
<ul>
  <li v-for="user in users" v-if="user.isActive">
    {{ user.name }}
  </li>
</ul>

// 好的用法1：使用计算属性过滤
computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive);
  }
}
<ul>
  <li v-for="user in activeUsers">
    {{ user.name }}
  </li>
</ul>

// 好的用法2：在父元素上使用 v-if
<ul v-if="users.length">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>
<p v-else>暂无用户</p>

// 好的用法3：使用 template 包裹
<template v-for="user in users">
  <li v-if="user.isActive" :key="user.id">
    {{ user.name }}
  </li>
</template>