vue实现简单全选和反选功能
本文实例为大家分享了vue实现简单全选和反选的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 700px;
text-align: center;
}
tr,
th {
height: 40px;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div class="box">
<table cellspacing='0' border="solid 1px">
<thead>
<tr>
<th>全选<input type="checkbox" v-model='isAllChecked'></th>
<th>id</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for='item in goods'>
<td><input type="checkbox" v-model='item.isCheck'></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '.box',
methods: {
},
data: {
goods: [
{
id: 20200905,
name: '苹果',
price: 3,
num: 12,
isCheck: false,
},
{
id: 20200905,
name: '香蕉',
price: 2,
num: 33,
isCheck: false,
},
{
id: 20200905,
name: '橘子',
price: 4,
num: 44,
isCheck: false,
},
]
},
computed: {
isAllChecked: {
/*
this.goods.every(el=>el.isCheck)返回结果为true 或者false
遍历下方每一个isCheck的状态、
1、 都选中返回true---------即全选为true,
2、 有一个没选中返回false---即全选为false
*/
get() {
return this.goods.every(el => el.isCheck)
},
set(val) {
// 全选的状态true、false两种状态
console.log(val);
// val为true即全选的时候、下方每一个isCheck也是true
// val为false即全选的时候、下方每一个isCheck也是false
return this.goods.forEach(el => el.isCheck = val);
}
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue常用的全选/反选的示例代码
在Vue中执行CheckBox的全选反选有很多方法 我觉得最易懂,速度最快的方法就是这个! 首先就是自己创建一个input,正在mx.txt的前方添加一个input:CheckBox.在v-model加上你每次创建出来的mx.check 最重点就在于forEach遍历,出来的都是当前的. 有些人不注意的一点,为什么data里面没有check:[]这样的出现. data里的是实时监控,你点一次自动将所有的check都变成了true. <template> <div class="
-
利用Vue.js实现checkbox的全选反选效果
前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'
-
vue+vant-UI框架实现购物车的复选框全选和反选功能
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch
-
vue使用监听实现全选反选功能
最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码. 首先定义数据 data: { /*全选.全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false}, {cityName:"西城区",isCheck:false}, {cityName
-
vue 全选与反选的实现方法(无Bug 新手看过来)
我就废话不多说,直接上代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div style="padding-left: 20px
-
vue2.0在table中实现全选和反选的示例代码
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的 git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp
-
vue实现全选和反选功能
本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.j
-
vue实现全选、反选功能
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级应该被勾选中 如果子集一个都没有选中,那么父级此时应该没有选中 最后提交用户改变后的数组 (大神原谅我的啰嗦哈) 开始上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
-
vue实现简单全选和反选功能
本文实例为大家分享了vue实现简单全选和反选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
-
javascript实现简单的全选和反选功能
本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt
-
js, jQuery实现全选、反选功能
js ,jq实现全选.反选功能: js:思路:1.点击全选按钮实现,下面内容全选,与反选 2.下面有一个没有选中时,全选按钮不勾选,当全部选中时才全选.这里引入一个计数器,来判断是否全部选中. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 全选<input type
-
纯javascript实现选择框的全选与反选功能
HTML部分 <div id="wrap_input_box" > <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <input type="checkbox"><br> <i
-
JavaScript实现全选或反选功能
本文实例为大家分享了JavaScript实现全选或反选功能的具体代码,供大家参考,具体内容如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例--表格全选</title> <style> table { border: 1px solid; margin: auto; widt
-
jquery实现简单的全选和反选功能
首先我们看个简单的实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g
-
vue+vant实现购物车全选和反选功能
本文实例为大家分享了vue+vant实现购物车全选和反选的具体代码,供大家参考,具体内容如下 这是效果图: 话不多少,直接上代码: <template> <div class="cart"> <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id"> <div class="st-it
-
jQuery实现checkbox列表的全选、反选功能
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(