vue全选与反选以及通过使用如何filter删除数据？
在vue学习经常遇到的一些基本问题，下面是购物车里面的部分功能，分享给初学者，直接上源码：
<style>
table, td, th{
border:1px solid #ebebeb;
border-collapse:collapse;
text-align: center;
}
table {
width:500px;
}
</style>
<body>
<div >
<table>
<thead>
<tr>
<th>选中个数{{checkedCount}}<input type="checkbox" v-model="allchecked" /></th>
<th>name</th>
<th>age</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td><input type="checkbox" v-model="item.checked" /></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><a href="###" @click="Delete(item)">{{item.anniu}}</a></td>
</tr>
</tbody>
</table>
<input type="button" name="" />
</div>
<script type="text/javascript">
var list=[
{
"name":"小明",
"age":23,
"checked":true,
"anniu":"删除"
},
{
"name":"小刚",
"age":23,
"checked":true,
"anniu":"删除"
},
{
"name":"小王",
"age":25,
"checked":true,
"anniu":"删除"
},
{
"name":"小三",
"age":26,
"checked":false,
"anniu":"删除"
}
]
new Vue({
el:'#app',
data:{
list
},
computed:{
allchecked:{
get:function(){
return this.list.length==this.checkedCount;
},
set:function(val){
//val 就是点击之后，全选按钮的v-model值状态，勾上true。未勾false
this.list.forEach(item =>{
item.checked =val;
})
}
},
checkedCount:{
get:function(){
var i=0;
this.list.forEach(item=>{
if(item.checked ===true){
i++;
}
})
return i;
}
}
},methods:{
btn:function(){
console.log(JSON.stringify(this.list))
},Delete:function(p){
this.list = this.list.filter(item=>item!==p)
console.log(this.list)
}
}
})
</script>
</body>
</html> 本人一贯的理念就是大家有更好的可以分享出来，与大家共同学习，共同进步