vue全选与反选以及通过使用如何filter删除数据

最新推荐文章于 2023-10-08 16:30:06 发布
最新推荐文章于 2023-10-08 16:30:06 发布
阅读量291 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/h5it/p/9553672.html
版权

在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>

本人一贯的理念就是大家有更好的可以分享出来，与大家共同学习，共同进步

转载于:https://www.cnblogs.com/h5it/p/9553672.html

anhuo5249
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 全选与反选的实现方法(无Bug 新手看过来)
08-28
下面小编就为大家分享一篇vue 全选与反选的实现方法(无Bug 新手看过来)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 移动端制作筛选，可多选、单选、重置
MYuanFang的博客
03-13 1796
直接上代码，我这边用的是cube-ui的弹窗，内容是自定义的，写完有点后悔了，没自己写弹出框，因为这样搭配用麻烦，标签里面循环的都是数组对象。 <cube-page type="drawer-def" title="Drawer"> <div slot="content" class="ViewsScreen"> <div cl...
Vue中filter使用及根据id删除数组元素
小破孩的博客
09-29 7663
先在methods下写一个filter过滤的方法 unique(arr) { // 根据唯一标识orderId来对数组进行过滤 console.log(arr); const res = new Map(); //定义常量 res,值为一个Map对象实例 //返回arr数组过滤后的结果，结果为一个数组 过滤条件是，如果res中没有某个键，就...
vue使用filter实现数组元素的删除
zwjl1017的博客
02-24 414
filter过滤实现删除数组元素
Vue3filter过滤删除
weixin_45099012的博客
08-03 689
filter过滤删除
vue 删除数组、list中的元素 filter
最新发布
weixin_43337481的博客
10-08 1226
let data=[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}];//index 当前元素索引；1：需要删除的元素个数。方法一：使用 filter过滤。if(item.name=='张三')方法二：使用 splice 移除。
vue2.0在table中实现全选和反选的示例代码
08-28
主要介绍了vue2.0在table中实现全选和反选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现全选、反选功能
08-30
主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现简单全选和反选功能
10-14
主要为大家详细介绍了vue实现简单全选和反选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中filter用法
qq_42238554的博客
10-28 5675
filters过滤器 filters是一个对象，在vue中的表达式如下： filters:{ fun1(v) { ...处理逻辑 return 返回处理后的值; }, fun2(v) { ...处理逻辑 return 返回处理后的值; }, } Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
vue的filter和js的删除方法对比
weixin_33962621的博客
08-04 743
先说一下原生的js的删除方法 1:js中的splice方法 　　splice(index,len,[item]) 注释：该方法会改变原始数组。 splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 ...
vue filter( ) 过滤数组方法
weixin_41796631的博客
10-02 7万+
要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据（非变异方法）。可以使用filter( ) 方法。 &lt;div id="div"&gt; &lt;li v-for="n in evenNumbers"&gt;{{ n }}&lt;/li&gt; &lt;/div&gt; &lt;script&gt; varvm=new Vue({ el:"#div&qu
filter方法删除数组里的值
weixin_36706903的博客
03-27 1251
需求：删除数组里不符合要求的值，可以用数组的方法splice（index,num),index表示从第几个开始删除，num表示删除几个，有第三个参数是往数组里添加的值，这里删除不写第三个参数，如果要替换某个位置的值，可以写上第三个参数，我这里用的过滤的方法，这样就可以过滤多个不符合要求的值 /* * *删除 筛选数组里的值，可以过滤多个，也就是删除多个 * *value :需要删除的值 ...
vue中删除数组元素
qq_41838435的博客
02-22 1万+
vue中删除数组元素 let arr = [ { name: 'aa', id: 11 }, { name: 'bb', id: 12 } ] 1、filter arr = arr.filter(t => t.id !== 11) // [{ name: 'bb',id: 12 }] 2、splice arr = arr.map((item,index) => { if (it
vue 数组删除(对象)单条删除，多条删除
丶凉雨拾忆
08-08 1万+
vue 数组删除(对象)单条删除，多条删除。
vue 表格删除功能结合filter更新对象数组
agua001的博客
03-31 360
首先： filter方法的使用可以参考： https://blog.csdn.net/weixin_41615439/article/details/108661807 使用filter操作对象数组，可以减少不必要的请求；如果不是对象数组，那filter方法是没有改变原数组的。 1、首先，表格数据我已经拿到 2、点击删除，逻辑代码如下： // 删除表格某个数据 del(id) { // 判断是多选还是单选 let delType = id instanceof Array
vue filter的四种用法
热门推荐
ruanhongbiao的专栏
04-28 9万+
本章主要讲vue2的过滤器的使用 先介绍下vue1与vue2的filter区别，也就是vue2更新的地方 　　a: 2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写。 　　b:2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例（后面有具体示例）： 之前调用: {{msg | mimi '12' '5'}} 现在调...
用vue实现todos，todos里面包含了增删改查功能，不会的看过来，保准你会！！！
m0_62201566的博客
10-05 960
一.先写静态页面，然后把静态页面分组件划分，最后再写效果，效果有增删改查。 二.效果展示： 三.代码展示： todos.css: *{ padding: 0; margin: 0; } ul,ol,li{ list-style: none; } body{ background-color: #F5F5F5; } #app{ width: 550px; margin: 10px auto; } .title{ height: 150px; line-height: 150.
vue学习第二天
若水程序员博客
04-22 133
vue 第二天 @click :name this.id=this.name=’’ @click.prevent=“del(item.id)” //阻止默认行为 如 arry.some((item,i)=>{ if(item.id==id){ return true}}) arry.some((item,i)=>{ if(item.id==id){ thi...
vue实现全选反选
05-24
在 Vue 中实现全选反选的功能可以通过以下步骤： 1. 在 data 中定义一个变量用来存储列表数据和选择状态，例如： ``` data() { return { items: [ { id: 1, text: 'item 1', selected: false }, { id: 2, text: 'item 2', selected: false }, { id: 3, text: 'item 3', selected: false } ], allSelected: false } } ``` 2. 在模板中展示列表和全选按钮： ``` <template> <div> <button @click="toggleAllSelection">{{ allSelected ? '取消全选' : '全选' }}</button> <ul> <li v-for="item in items" :key="item.id"> <input type="checkbox" v-model="item.selected"> {{ item.text }} </li> </ul> </div> </template> ``` 3. 实现全选反选的方法： ``` methods: { toggleAllSelection() { this.allSelected = !this.allSelected; this.items.forEach(item => { item.selected = this.allSelected; }); } } ``` 以上代码实现了一个简单的全选反选功能，当点击全选按钮时，会将所有列表项的选择状态设置为全选按钮的状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值