SOURCE

<!-- 
v-for 可以遍历数组 也可以遍历对象

 -->
<div id="vfor">
    <ul>
        <li v-for="(list, index) in items">{{list.name}}-{{list.age}}
            <button @click="deletList(index)">删除</button>--
            <button @click="update(index, {name: 'pp',age: 11})">更新</button>
        </li>
    </ul>
    <h1>v-for遍历对象</h1>
    <ul>
        <li v-for="(val, key) in items[1]" :ke="key">{{val}}--{{key}}</li>
    </ul>
    <h1>v-for列表渲染</h1>
    <div>
        <!-- 这里用到计算属性  对数组进行过滤计算返回 -->
        <input type="text" v-model="inputval" />
        <ul>
            <li v-for="(p, index) in filterItem">{{index}} -- {{p.name}} -- {{p.age}}</li>
        </ul>
        <button @click="orderType = 1">年龄升序</button>
        <button @click="orderType = 2">年龄降序</button>
        <button @click="orderType = 0">原本顺序</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#vfor",
        data: {
            inputval: "",
            // vue本身只是监视了persons的改变，没有监视数组内部数据的改变
            // vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，再去更新界面）
            orderType: 0, // 0-原本 1-升序 2-降序
            items: [
                {name: 'haell', age: 12},
                {name: 'aaell', age: 14},
                {name: 'raell', age: 13}
            ]
        },
        methods: {
            deletList(index) {
                this.items.splice(index, 1)
            },
            update(index, newP) {
                this.items.splice(index,1,newP);
                // 下面这样赋值操作， 并没有改变persons本身， 数组内部发生了变化，但是并没有调用变异方法,vue就不会更新界面
                // this.items[index] = newP;
            }
        },
        computed: {
             // 计算属性的 getter
            filterItem() {
                // 这里面的this 指向 vm 的实例
                // 取出相关数据
                const {inputval, items, orderType} = this;
                // 最终需要显示的数据
                let endList;
                // 对items进行过滤
                endList = items.filter(val => val.name.indexOf(inputval) !== -1);
                if(orderType !== 0) {
                    endList.sort((val1, val2) => {
                        if(orderType == 1) {
                            return val1.age - val2.age
                        } else {
                            return val2.age - val1.age
                        }
                    })
                }
                return endList;
            }
        }
    })
</script>