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 input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
一个简单的js树形菜单
Dec 09 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
jquery选择器使用详解
Apr 08 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
详解如何在项目中使用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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
实例讲解php数据访问
2016/05/09 PHP
降低PHP Redis内存占用
2017/03/23 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python绘制3D图形
2018/05/03 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
python的sorted用法详解
2019/06/25 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
delegate与普通函数的区别
2014/01/22 面试题
铭立家具面试题
2012/12/06 面试题
简历中个人自我评价分享
2014/03/15 职场文书
大学专科自荐信
2014/06/17 职场文书
保安2014年终工作总结
2014/12/06 职场文书
开展警示教育活动总结
2015/05/09 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
公司员工培训管理制度
2015/08/04 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
python实现三阶魔方还原的示例代码
2021/04/28 Python