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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
用js实现预览待上传的本地图片
Mar 15 Javascript
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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实现网上点歌(二)
2006/10/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP实现简易计算器功能
2020/08/28 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
js更优雅的兼容
2010/08/12 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
什么是lambda函数
2013/09/17 面试题
大二学期个人自我评价
2014/01/13 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL