想要实现的功能：
1. 按add按钮添加列表项。
2. 按del按钮永久隐藏对应列表项。
程序如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="task.show" v-for="(item,index) in list">
<span>{{item.content}}</span>
<button v-on:click="del(index)">del</button>
</div>
<button v-on:click="add">add</button>
</div>
<script>
var vm = new Vue ({
el: "#app",
data: {
task: {
content: "",
show: true
},
list: [],
},
methods: {
del:function(index) {
this.list[index].show = !this.list[index].show;
},
add:function() {
this.task = {
content: "new",
show: true
};
this.list.push(this.task);
}
}
});
</script>
</body>
</html>
出现的问题：
1. 按add按钮增加了3个列表项后，对第二个列表项按del按钮，仅会修改show的内容为false，但并不隐藏。
2. 按add按钮增加了n个列表项后，只有第n个del按钮能隐藏列表项，而且是隐藏所有列表项。
想要请教各位前辈，问题出在哪里？谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue test</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="item.show" v-for="(item) in list">
<span>{{item.content}}</span>
<button v-on:click="del(item)">del</button>
</div>
<button v-on:click="add">add</button>
</div>
<script>
var vm = new Vue ({
el: "#app",
data: {
list: []
},
methods: {
del:function(item) {
item.show = false;
},
add:function() {
var obj = {
content: "new",
show: true
};
this.list.push(obj);
}
}
});
</script>
</body>