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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
Jquery倒计时源码分享
May 16 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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
PHP安装问题
2006/10/09 PHP
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
javascript 函数使用说明
2010/04/07 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python绘制立方体的方法
2018/07/02 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python 并发下载器实现方法示例
2019/11/22 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
全球性的在线商店:Vogca
2019/05/10 全球购物
师德师风个人反思
2014/04/28 职场文书
2014年财务科工作总结
2014/11/11 职场文书
运动会广播稿200字
2015/08/19 职场文书
纪律委员竞选稿
2015/11/19 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis