Vue 学习笔记 6 —— 列表渲染

1. 遍历数组元素

使用 v-for 把数组对应为一组元素

语法：

<ul id="app">
    <li
        v-for="(item, index) of items" 
        v-bind:key="item"
        >index={{index}}, item={{item}}		</li>
</ul>

使用 (item, index) of array 来遍历数组，逐个渲染。

也可以用(item, index) in array，参数 index 是可选的。

当 Vue 更新元素列表时，Vue 不会移动 DOM 类匹配数据项顺序，为每一项提供 key 可以使得 DOM 根据数据自动重排序！

举个栗子

创建数组对象：

let vm = new Vue({
    el: "#app",
    data: {
        children: [
            {name: 'tom', age: 6},
            {name: 'lucy', age: 8},
            {name: 'jerry', age: 3}
        ]
    }
})

对数组元素逐个渲染：

<ul id="app">
    <li
        v-for="(child, index) of children" 
        v-bind:key="item"
    >index={{index}}<br>name={{child.name}}<br>age={{child.age}}</li>
</ul>

---

2. 逐个渲染对象

语法：

<ul id="app">
    <li
        v-for="(value, name) in apple"
    >{{name}} : {{value}}</li>
</ul>

有两个参数：value（第一个）和 name

举个栗子

let vm = new Vue({
    el: "#app",
    data: {
        apple: {
            color: 'red',
            price: '8RMB',
            weight: '200g'
        }
    }
})

<ul id="app">
    <li
        v-for="(value,name) of object"
        >{{name}} : {{value}}</li>
</ul>

---

3. 数组更新检测

# 变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些被包裹过的方法包括：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

# 数组替换

如筛选出偶数：

<div id="app">
    <button @click="even">select even</button>
    <ul>
        <li 
            v-for="(item, index) of numbers"
            v-bind:key="index"
        >{{item}}</li>
    </ul>
</div>

let vm = new Vue({
    el: "#app",
    data: {
        numbers: [5, 6, 8, 2, 1, 3]
    },
    methods: {
        even: function(){
            this.numbers = this.numbers.filter(item => item % 2 == 0)
        }
    }
})

注意：由于 JavaScript 的限制，Vue 检测不到数组和对象的变化！

---

4. 显示排序结果

可以使用计算属性来存储新的结果，在用 v-for 逐个渲染：

let vm = new Vue({
    el: "#app",
    data: {
        arr: [5, 6, 8, 2, 1, 3]
    },
    computed: {
        sortedArr: function(){
            return this.arr.sort((a, b)=>{
                if (a > b) return 1;
                if (a < b) return -1;
                return 0;
            });
        }
    }
})

参考： Vue 教程