vue实现简单的全选全不选

最新推荐文章于 2023-09-21 15:23:15 发布
最新推荐文章于 2023-09-21 15:23:15 发布
阅读量255 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLL_liuhui/article/details/97801516
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue.js"></script>
		<style>
			* {margin: 0;padding: 0;}
			.main{margin: 50px;}
			li{list-style: none;}
			ul li{padding-left: 20px;}
		</style>
	</head>
	<body>
		<div class="main" id="app">
			<div>
				<input type="checkbox" v-model="allCheck" @change="changeAll()" />水果
			</div>
			<ul>
				<li v-for="(item,index) in list"><input type="checkbox" v-model="item.check" @change="singleCheck" key="index">{{item.name}}</li>
			</ul>
		</div>
		<script>
			window.onload = function(){
				new Vue({
					el: '#app',
					data: {
						allCheck: false,
						list:[
							{name: '苹果',check: false},
							{name: '香蕉',check: false},
							{name: '荔枝',check: true},
							{name: '西瓜',check: false},
							{name: '李子',check: false}
						],
						checkNames: []
					},
					methods: {
						singleCheck(){
// 							this.checkNames = [];
// 							this.list.forEach((item)=>{
// 								if(item.check == true){
// 									this.checkNames.push(item);
// 								}
// 							})
// 							console.log(this.checkNames)
// 							if(this.list.length==this.checkNames.length){
// 								this.allCheck = true;
// 							}else{
// 								this.allCheck = false;
// 							}
							
							//filter()是对数组中每一项运行给定函数,返回符合条件的项数组
							var count = this.list.filter(function(item){
								return item.check==true;
							})
// 							console.log(count)
							this.allCheck = this.list.length == count.length ? true : false;


							//every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
// 							this.allCheck = this.list.every(function(item){
// 								return item.check
// 							})
							//some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。
// 							this.allCheck = this.list.some(function(item){
// 								return item.check
// 							})
						},
						changeAll(){
// 							for(var i=0;i<this.list.length;i++){
// 								this.list[i].check=this.allCheck;
// 							}
							this.list.forEach((item)=>{
								item.check = this.allCheck
							})
						}
					}
				})
			}
			
		</script>
	</body>
</html>

 

LLL_LH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 实现全选、多选、单选效果
chenyajundd的博客
08-05 3759
假如这里有多个卡片，点击相应卡片之后需要提交卡片内信息，我们需要把点击的卡片筛选出来，在不使用组件库的前提下实现全选，多选，单选操作（其中全选和多选为一个需求，单选为一个需求）
vue.js实现的全选与全不选功能示例【基于elementui】
01-19
本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考，具体如下： elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办? 首先渲染页面： <el v-model=checkAll change=handleCheckAllChange>全选</el> <tbody v-for=item> <tr> <td class=order-num colspan=7> <el-checkbox v-model=item.
Vue实现动态复选框的全选 全不选 获取选中值
m0_51945510的博客
11-19 4946
Vue实现动态复选框的全选 全不选 获取选中值
Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式
m0_37922443的博客
04-26 2005
@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。 注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U.
【详解代码】vue element el-select选择器多选下拉框实现全选功能和取消全选
DecorateCC的博客
06-30 5121
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
Vue实现全选、反选、全不选功能
功能总结
03-03 5300
Vue实现全选、反选、全不选功能
Vue3 递归组件 全选或者全不选 重命名组件（不修改文件名称）
丿灬安之若死
02-25 291
新建 Tree.vue 这个是递归组件。效果 当选中的时候就权限。准备好数据 这是App.vue。
vue 实现全选全不选的示例代码
08-27
本篇文章主要介绍了 Vue 实现全选全不选的示例代码，提供了一个使用 Vue 框架实现全选全不选的示例代码。该示例代码使用 Vue 的双向数据绑定命令 v-model 实现全选全不选功能，解决了 jQuery 中大量的 DOM 操作。 ...
vue实现简单全选和反选功能
10-14
在Vue.js中，实现全选和反选功能是常见的需求，尤其在表格或者列表...以上就是使用Vue实现简单全选和反选功能的详细解析。这个实现不仅适用于静态数据，也可以应用于动态数据，只需确保商品数据正确绑定到Vue实例即可。
vue之复选框选中表格行数据（全选/全不选/部分选）
最新发布
a_123456_bb的博客
09-21 901
【代码】vue之复选框选中表格行数据（全选/全不选/部分选）
vue2.0实现一键全选，全不选
06-01
当单个选中所有时，全选自动变成全选状态；当全选后，取消其中一个，全选状态改变。
Vue实现全选按钮
2201_75321887的博客
03-29 598
点击全选时，所有按钮全部选中，所有按钮全部选中时，全选按钮也自动被选择，但只要有一个按钮未被选中，则全选按钮就不会被选中。
vue3 实现全选/全不选功能
weixin_39531049的博客
05-30 1705
通过计算属性的 get()跟set()方法绑定 全选按钮的值.实现逻辑就是全选按钮的选中与否依赖,所有的子复选框是否选中,
vue实现单选多选反选全选全不选
weixin_33802505的博客
09-07 1136
单选 当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radioList" :key="index" :class="selectedNum==index?'active':''" @click="select(...
vue实现下拉复选框全选与全不选
qq_42628504的博客
10-11 2502
<el-select multiple collapse-tags v-model="searchForm.auditResult" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择"> <el-option label="全选" value="全选" @click.native="selectAll"></el-option> <el-option v-for="(i...
vue实现全选全不选
热门推荐
前端很忙
03-27 1万+
全选功能可以说是前端开发中非常常见的一个功能。从jQuery到vue的转变主要是一个思想想的转变，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。
vue实现全选与全不选
weixin_42453826的博客
03-07 731
https://segmentfault.com/q/1010000012675796?_ea=3106401
vue 最简单的方法实现全选反选
Jadeyqc的博客
05-09 379
就下面几步，简单实现！ <input type="checkbox" name="quanxuan" id="quanxuan" @click="checkAll">全选 //全选设置一个函数 <div class="lei" v-for="list in 10" :key="list"> <input type="checkbox" ref="che" name="quanxuan" id="quanxuan"> </div>//加上 ref
vue购物车全选全不选
06-09
在Vue中实现购物车的全选和全不选，一般需要以下步骤： 1. 在购物车列表中，为每个商品项添加一个选中状态的属性，例如isChecked。 2. 添加全选和全不选的按钮，绑定对应的事件处理函数。 3. 在事件处理函数中，改变购物车列表中每个商品项的isChecked属性，实现全选或全不选功能。 示例代码： ``` <template> <div> <div v-for="(item, index) in cartList" :key="index"> <input type="checkbox" v-model="item.isChecked"> {{ item.name }} - {{ item.price }} </div> <button @click="selectAll">全选</button> <button @click="unselectAll">全不选</button> </div> </template> <script> export default { data() { return { cartList: [ { name: "商品1", price: 10, isChecked: false }, { name: "商品2", price: 20, isChecked: false }, { name: "商品3", price: 30, isChecked: false } ] }; }, methods: { selectAll() { this.cartList.forEach(item => { item.isChecked = true; }); }, unselectAll() { this.cartList.forEach(item => { item.isChecked = false; }); } } }; </script> ``` 在模板中，使用v-model指令绑定每个商品项的isChecked属性，实现复选框的选中和取消选中。在事件处理函数中，使用forEach()方法遍历购物车列表，改变每个商品项的isChecked属性，实现全选或全不选功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值