vue列表渲染
阿新 • • 發佈:2020-09-06
<!--
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)
}
}
})