vue 全选与反选的实现方法(无Bug 新手看过来)


Posted in Javascript onFebruary 09, 2018

我就废话不多说,直接上代码吧!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div style="padding-left: 20px">
<ul style="margin-bottom: 20px"> 
<li v-for="(item, index) in proData">
<input type="checkbox" :value="index" v-model="selectArr">{{item.name}}
</li>
</ul>
<label> 
<input type="checkbox" @click="selectAll" :checked="checked"/>全选 
</label> 
</div> 
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
proData: [
   {
 "name": "张三"
}, {
 "name": "李四"
}, {
 "name": "王五"
}, {
 "name": "赵六"
}
],
   selectArr: [],
   checked : false
},
watch : {
 selectArr(curVal){
 if(curVal.length == this.proData.length){
 this.checked = true
 }else{
 this.checked = false
 }
 }
 },
 methods: {
  selectAll(event){
   if (!event.currentTarget.checked) {
    this.selectArr = [];
   } else { //实现全选
    this.selectArr = [];
    this.proData.forEach((item, i) =>{
     this.selectArr.push(i);
    });
   }
  }
 }
})
</script>
</html>

如果有bug,请告知!

以上这篇vue 全选与反选的实现方法(无Bug 新手看过来)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js倒计时显示实例
Dec 11 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
浅析vue component 组件使用
Mar 06 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 #Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 #Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 #Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 #Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 #Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 #Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
You might like
Chrome Web App开发小结
2014/09/04 PHP
php fread读取文件注意事项
2016/09/24 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python中循环语句while用法实例
2015/05/16 Python
Python实现处理管道的方法
2015/06/04 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
阳光体育活动方案
2014/02/16 职场文书
党员公开承诺事项
2014/03/25 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
蓬莱阁导游词
2015/02/04 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
GPU服务器的多用户配置方法
2022/07/07 Servers