在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删除数据的更多相关文章

  1. [原]vue实现全选，反选

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...

  2. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  3. vue+vant-UI框架写的购物车的复选框全选和反选

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...

  4. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  5. vue2.0在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  6. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  7. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  8. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  9. 夺命雷公狗-----React---28--小案例之react经典案例todos（全选和反选）完

    这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. sass 基本语法

    sass语法 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号. 而本教程 ...

  2. box-shadow 模拟border

    border会占据空间;如果想加边框效果,但是又不占用空间,可以使用box-shadow来模拟 demo div 100*100 border:10px solid red; 可以写: div 100 ...

  3. bzoj2916

    容斥原理 计蒜客比赛day2t3的简化版 总数-异色三角形 对于每个点考虑,每个点红线数量为d[i],那么以这个点为顶点的异色三角形有d[i]*(n-1-d[i]),每条红线和蓝线成一个异色三角形,一 ...

  4. 关于使用kafka时对于大数据消息体是遇到的问题

    kafka对于消息体的大小默认为单条最大值是1M. 但是在我们应用场景中, 常常会出现一条消息大于1M, 如果不对kafka进行配置. 则会出现生产者无法将消息推送到kafka或消费者无法去消费kaf ...

  5. “Live Desktop” privacy statement

    “Live Desktop” pays attention to your privacy protection. Sometimes we need some information to prov ...

  6. 使用vmware12安装Ubuntu 遇到的两个问题和解决

    1.need the x86-64 cpu,but only detected the xxx cpu. 这是因为bios中的virtual function 是 disabled,改为enabled ...

  7. Luogu P1073 最优贸易【最短路/建反图】 By cellur925

    题目传送门 这么经典的题目,还是看了lyd的题解....唉难过. 一句话题意:在一张点有全都的图上找一条从1到n的路径,存在两个点p,q(p<q),使val[q]-val[p]最大. 给出的图是 ...

  8. 洛谷 P3285 [SCOI2014]方伯伯的OJ

    看到这题,第一眼:平衡树水题,随便做一做好了 然后....我在花了n个小时去调试(维护平衡树父节点)之后,... 调了三个小时后,第一次失败的代码(只能查找排名为k的用户编号,不能根据编号查排名) # ...

  9. 贪心+模拟 ZOJ 3829 Known Notation

    题目传送门 /* 题意:一串字符串,问要最少操作数使得成为合法的后缀表达式 贪心+模拟:数字个数 >= *个数+1 所以若数字少了先补上在前面,然后把不合法的*和最后的数字交换,记录次数 岛娘的 ...

  10. orcl 11g 创建表空间

    Oracle11g创建表空间语句   在plsql工具中执行以下语句,可建立Oracle表空间. /*分为四步 *//*第1步:创建临时表空间  */create temporary tablespa ...