在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. 杂项-Java：JBoss

    ylbtech-杂项-Java:JBoss 是一个基于J2EE的开放源代码的应用服务器. JBoss代码遵循LGPL许可,可以在任何商业应用中免费使用.JBoss是一个管理EJB的容器和服务器,支持E ...

  2. word excel 等导出相关操作

    无插件,无com组件,利用EXCEL.WORD模板做数据导出(一) http://www.cnblogs.com/tzy080112/p/3413938.html 使用Aspose.Cells组件生成 ...

  3. 解决 The word is not correctly spelled问题（转载）

    转自:http://jyao.iteye.com/blog/1261555 The word is not correctly spelled 此问题是eclipse校验单词拼写造成,如果出在配置文件 ...

  4. bzoj 2115: [Wc2011] Xor【线性基+dfs】

    -老是想到最长路上 其实可以这样:把每个环的xor和都存起来,然后任选一条1到n的路径的xor和ans,答案就是这个ans在环的线性基上跑贪心. 为什么是对的--因为可以重边而且是无相连通的,并且对于 ...

  5. P4055 [JSOI2009]游戏

    传送门 把这个图给黑白染色然后建二分图,如果有完备匹配那么就gg,否则放在所有的非匹配点都可以 简单来说的话就是放在非匹配点,那么对手的下一步必定移到一个匹配点,然后自己可以把它移到这个匹配点所匹配的 ...

  6. 安卓Activity全屏显示以及不显示title

    1.让Activity全局显示,使系统的导航栏变为透明: (1)可以在Activity代码中添加window属性: if(VERSION.SDK_INT >= VERSION_CODES.KIT ...

  7. [Usaco2008 Dec]Hay For Sale 购买干草

    Description 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草． 顿因有H(1≤H≤5000)包干草,每一 ...

  8. home键拦截

    代码: public class HomeKeyReceiver extends BroadcastReceiver { private static final String LOG_TAG = & ...

  9. NDK(10)Android.mk各属性简介，Android.mk 常用模板--未完

    参考 : http://blog.csdn.net/hudashi/article/details/7059006 1. Android.mk简介 Android.mk文件是GNU Makefile的 ...

  10. [转]如何在 TFS 中使用 Git

    本文转自 http://www.cnblogs.com/stg609/p/3651688.html 对 Charley Blog 的代码进行版本控制的想法由来已久,在代码建立之初其实已经使用过 TFS ...