vue全选与反选以及通过使用如何filter删除数据
在vue学习经常遇到的一些基本问题,下面是购物车里面的部分功能,分享给初学者,直接上源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue使用filter删除数组中每一项</title>
<style>
table, td, th{
border:1px solid #ebebeb;
border-collapse:collapse;
text-align: center;
}
table {
width:500px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<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" style="zoom:200%" /></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="" id="btn" value="提交" @click="btn()" />
</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>
本人一贯的理念就是大家有更好的可以分享出来,与大家共同学习,共同进步
最新文章
- 在 Linux 中使用搜狗拼音输入法以及搞定 Flash 和支付宝
- JSDeferred 源码分析
- 如果让你来做HashMap扩容,如何实现在不影响读写的情况下扩容?
- 2014 项目中用到batik
- python基础篇
- Java 项目优化实战
- 嵌入式Linux驱动学习之路(一)嵌入式系统的软硬件架构
- 用MathType编辑横三角形的方法
- webStorm 注册码 (备用)
- java_文件类
- Mongoose即使是简单的表查询
- GMA Round 1 数列求和(Hard)
- C# MVC 用户登录状态判断
- UVA 11488 Hyper Prefix Sets (字典树)
- 【刷题】LOJ 6011 「网络流 24 题」运输问题
- docker之安装和管理mongodb
- pandas删除dataframe列
- RHEL7 富规则删除
- js动态加载图片核心代码
- Memcached 查看列出所有key方法