vue列表渲染

<!--
1. 列表显示
数组: v-for / index

<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}

</li>
</ul>

对象: v-for / key
<h2>测试: v-for 遍历对象</h2>

<ul>
<li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
</ul>
<button @click="addP({name: 'xfzhang', age: 18})">添加</button>


2. 列表的更新显示
删除item
    --<button @click="deleteP(index)">删除</button>

替换item

    --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>

-->


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},

methods: {
deleteP (index) {
this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
// 1. 调用原生的数组的对应方法
// 2. 更新界面
},

updateP (index, newP) {
console.log('updateP', index, newP)
// this.persons[index] = newP // vue根本就不知道
this.persons.splice(index, 1, newP)
// this.persons = []
},

addP (newP) {
this.persons.push(newP)
}
}
})
posted @ 2020-09-06 14:34  czxIT299  阅读(105)  评论(0编辑  收藏  举报