<!DOCTYPE html>
<body>
<div id="app">
<div v-for="(list, index) in lists" :key="list.id">
{
{
list.name }}
<button v-on:click="deleteIetm">删除</button></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
lists: [
{
id: 1, name: 'k1'},
{
id: 2, name: 'k2'},
{
id: 3, name: 'k3'},
],
}
},
methods: {
deleteIetm(index) {
this.lists.splice(index, 1)
}
},
})
app.mount('#app')
</script>
</body>
</html>
这个不能自己点按键添加一行吧，只能手动添加。
没有发现用list.id和index有什么区别
https://www.cnblogs.com/youhong/p/11327062.html
<!DOCTYPE html>
<body>
<div id="app">
<div v-for="(list, index) in lists" :key="index">
{
{
list.name }}
<button v-on:click="deleteIetm">删除</button></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
lists: [
{
id: 1, name: 'k1'},
{
id: 2, name: 'k2'},
{
id: 3, name: 'k3'},
{
id: 4, name: 'k4'},
],
}
},
methods: {
deleteIetm(index) {
this.lists.splice(index, 1)
}
},
})
app.mount('#app')
</script>
</body>
</html>
:key="index"的情况
还有index换成list.id的情况
不明所以。