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获取CLASS对象(很简单实用)
Oct 15 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
Vue.js中的组件系统
May 30 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
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php 安全过滤函数代码
2011/05/07 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
Python基于DES算法加密解密实例
2015/06/03 Python
Python自动扫雷实现方法
2015/07/25 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
地理教师岗位职责
2014/03/16 职场文书
大学生励志演讲稿
2014/04/25 职场文书
欠条样本
2015/07/03 职场文书
小学班主任教育随笔
2015/08/15 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android