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>
本人一贯的理念就是大家有更好的可以分享出来，与大家共同学习，共同进步
vue全选与反选以及通过使用如何filter删除数据的更多相关文章
- [原]vue实现全选，反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- vue2.0在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- 夺命雷公狗-----React---28--小案例之react经典案例todos（全选和反选）完
这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- Scanner类nextLine()和next()的区别和使用方法
next()一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后输入的 ...
- bzoj 2257: [Jsoi2009]瓶子和燃料【裴蜀定理+gcd】
裴蜀定理:若a,b是整数,且gcd(a,b)=d,那么对于任意的整数x,y,ax+by都一定是d的倍数,特别地,一定存在整数x,y,使ax+by=d成立. 所以最后能得到的最小燃料书就是gcd,所以直 ...
- bzoj3316: JC loves Mkk（单调队列+分数规划）
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...
- 解决 iphone5 4 inch 屏 app黑边问题
你需要一张640*1138的预加载图(launch image).在工程>TARGETS 中添加,系统将自动将其重命名为Default-568h@2x.png.
- git 文件回滚
场景1:当你改乱了工作区某个文件的内容,想直接丢弃工作区的修改时,用命令git checkout -- file.场景2:当你不但改乱了工作区某个文件的内容,还添加到了暂存区时,想丢弃修改,分两步,第 ...
- 最短路(Dijkstra) HDOJ 4318 Power transmission
题目传送门 题意:起点s到终点t送电,中途会有损耗,问最小损耗是多少 分析:可以转换为单源最短路问题,用优先队列的Dijkstra版本,d[]表示从s出发到当前点的最小损耗,用res保存剩下的电量.当 ...
- 循环队列 分类： c/c++ 2014-10-10 23:28 605人阅读 评论(0) 收藏
利用线性表实现队列,为了有效利用空间,将其设计为循环结构,防止假溢出:牺牲一个存储单元以区分队空.队满. 设front队头,rear队尾,N为顺序表大小 队空:rear==front 队满:(rear ...
- dalvik.system.VMRuntime 隐藏api的迷惑
[Android UI界面]关于dalvik.system.VMRuntime 的 使用迷惑 我也遇到了相同问题.不知楼主现在解决了没有? 回答1: [Android UI界面]关于dalvik.sy ...
- centOS下安装JDK1.8.60，glassfish4.1.1以及MySQL
一.安装环境 操作系统 Windows7 Enterprise 64位 需要用到的软件 JDK:jdk-8u60-linux-x64.rpm Glassfish: Glassfish4.1.1.zip ...
- 转-iOS 动画总结----UIView动画
来自:http://blog.csdn.net/huifeidexin_1/article/details/7597868/ 1.概述 UIKit直接将动画集成到UIView类中,实现简单动画的创建过 ...