使用index
<body>
<div id="app">
<div>
<span>{{arr}}</span>
<ul>
<li v-for="(value, index) in arr" :key="index">
<test :val="value" />
</li>
</ul>
<button @click="handleUnshift">unshift</button>
<button @click="handlePush">push</button>
<button @click="handleDelete">delete</button>
<button @click="handleReset">reset</button>
</div>
</div>
<script src="../../dist/vue.js"></script>
<script>
var list = []
var vm = new Vue({
el: '#app',
data() {
return {
arr: [1, 2, 3],
cur: 4
};
},
beforeUpdate() {
console.log("父组件.beforeUpdate");
},
methods: {
handleUnshift() {
this.arr.splice(0, 0, this.cur++);
},
handlePush() {
this.arr.push(this.cur++);
},
handleDelete() {
this.arr.splice(1, 1)
},
handleReset() {
this.arr = [1, 2, 3]
this.cur = 4
}
},
components: {
test: {
beforeUpdate() {
console.log("子组件.beforeUpdate");
},
props: {
val: Number
},
// template: "<li>{{val}}</li>",
template: "<li>{{Math.random()}}</li>"
}
}
})
</script>
</body>
从尾部添加
看起来是依次添加的，没问题！
从头部添加
看起来做了和上边push一样的操作？
删掉第二个元素
第一次删除，原本是想删掉第二个元素，结果居然删掉了最后一个？
使用Math.random()
<body>
<div id="app">
<div>
<span>{{arr}}</span>
<ul>
<li v-for="(value, index) in arr" :key="Math.random()">
<test :val="value" />
</li>
</ul>
<button @click="handleUnshift">unshift</button>
<button @click="handleDelete">delete</button>
</div>
</div>
<script src="../../dist/vue.js"></script>
<script>
var list = []
var vm = new Vue({
el: '#app',
data() {
return {
arr: [1, 2, 3],
cur: 4
};
},
beforeUpdate() {
console.log("父组件.beforeUpdate");
},
methods: {
handleUnshift() {
this.arr.splice(0, 0, this.cur++);
},
handleDelete() {
this.arr.splice(1, 1)
}
},
components: {
test: {
updated() {
console.log("updated.1");
},
props: {
val: Number
},
// template: "<li>{{val}}</li>",
template: "<li>{{Math.random()}}</li>"
}
}
})
</script>
</body>
看起来不管是什么操作，完全是没得复用了...
反转数组
<body>
<div id="app">
<div>
<span>{{arr}}</span>
<ul>
<li v-for="(value, index) in arr" :key="index">
<test :val="value" />
</li>
</ul>
<button @click="this.handleDelete">反转数组</button>
</div>
</div>
<script src="../../dist/vue.js"></script>
<script>
var list = []
var vm = new Vue({
el: '#app',
data() {
return {
arr: [1, 2, 3],
cur: 4
};
},
beforeUpdate() {
console.log("父组件.beforeUpdate");
},
methods: {
handleDelete() {
this.arr.reverse()
}
},
components: {
test: {
beforeUpdate() {
console.log("子组件.beforeUpdate");
},
props: {
val: Number
},
// template: "<li>{{val}}</li>",
template: "<li>{{Math.random()}}</li>"
}
}
})
</script>
</body>
反转数组没有引起页面任何变化
