VUE列表渲染

作者: 陈老板_ | 来源:发表于2018-06-25 14:24 被阅读9次

vue列表渲染
2019-03-09 Vue基础知识
vue中的列表(数组)渲染例子
uniapp之列表渲染中key值的作用(vue.js)
6.vue中的条件渲染&列表渲染
VUE列表渲染
Vue 列表渲染
Vue 列表渲染
vue列表渲染
Vue列表渲染

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

数组更新检测：

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <h2>v-for遍历数组</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{index}}----{{p.name}}----{{p.age}}
                --- <button @click="deleteP(index)">删除</button>---- <button @click="updateP(index,{name:'Cat',age:20})">更新</button>
            </li>

        </ul>
        <h2>v-for遍历对象</h2>
        <ul>
            <li v-for="(item,key) in persons[1]">
                {{item}}--->{{key}}
            </li>
        </ul>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            persons:[ //vue本身只是监视了persons的改变，没有监视数组内部数据的改变
                //Vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，后更新界面）-》数组内部改变，界面自动变化
                {name:'Tom',age: 18},
                {name:'ccc',age: 16},
                {name:'jjj',age: 17},
                {name:'xxx',age: 19},
            ]
        },
        methods:{
            deleteP(index){
                //删除persons中指定index的p
                this.persons.splice(index,1)
            },
            updateP(index,newP){
                //this.persons[index] = newP
                // 并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
                //this.persons = []
                this.persons.splice(index,1,newP);
            }
        }
    })
</script>
</html>