利用Vue.js实现checkbox的全选反选效果

前言

这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.

html示例代码

<template>
 <div>
 <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
 <template v-for='checkb in checkboxData'>
 <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}}
 </template>
 </div>
</template>

js示例代码

<script>
export default {
methods:{
 checkedAll: function() {
 var _this = this;
 console.log(_this.checkboxModel);
 if (this.checked) {//实现反选
 _this.checkboxModel = [];
 }else{//实现全选
 _this.checkboxModel = [];
 _this.checkboxData.forEach(function(item) {
 _this.checkboxModel.push(item.id);
 });
 }
 }
},
watch: {//深度 watcher
 'checkboxModel': {
 handler: function (val, oldVal) {
 if (this.checkboxModel.length === this.checkboxData.length) {
 this.checked=true;
 }else{
 this.checked=false;
 }
 },
 deep: true
 }
},
data () {
 return {
 checkboxData:[{
 id:'1',
 value:'苹果'
 },{
 id:'2',
 value:'荔枝'
 },{
 id:'3',
 value:'香蕉'
 },{
 id:'4',
 value:'火龙果'
 }],
 checkboxModel:['1','3','4'],
 checked:""
 }
}
}
</script>

watch

类型： Object

详细：

一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() 。

示例：

var vm = new Vue({
 data: {
 a: 1
 },
 watch: {
 'a': function (val, oldVal) {
 console.log('new: %s, old: %s', val, oldVal)
 },
 // 方法名
 'b': 'someMethod',
 // 深度 watcher
 'c': {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
 }
 }
})
vm.a = 2 // -> new: 2, old: 1

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • vue2.0在table中实现全选和反选的示例代码

    vue2.0在table中实现全选和反选的示例代码

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

  • vue实现全选、反选功能

    vue实现全选、反选功能

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级应该被勾选中 如果子集一个都没有选中,那么父级此时应该没有选中 最后提交用户改变后的数组 (大神原谅我的啰嗦哈) 开始上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • vue实现全选和反选功能

    本文实例为大家分享了vue实现全选反选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript" src = "vue.j

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

  • vue使用监听实现全选反选功能

    最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码. 首先定义数据 data: { /*全选.全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false}, {cityName:"西城区",isCheck:false}, {cityName

  • js操作CheckBoxList实现全选/反选(在客服端完成)

    对于CheckBoxList控件来说,一方面要实现大量数据在服务器端的绑定工作,另一方面往往要求实现全选.反选等功能.虽然可以在服务器端完成这方面的工作,但这样一个简单的工作似乎更应该在客户端完成. 具体方法: 在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行 动态控制时,将会非常清晰其测试代码如下所示: 复制代码 代码如下: <asp:CheckBoxListID="CheckBoxList1"runat="s

  • jquery checkbox全选反选效果代码

    jquery checkbox全选反选效果代码

    运行后查看效果,需要刷新下. jquery事件2 你最喜欢的体育运动是? 你的姓名: 足球 篮球 兵乓球 游泳 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Vue常用的全选/反选的示例代码

    在Vue中执行CheckBox的全选反选有很多方法 我觉得最易懂,速度最快的方法就是这个! 首先就是自己创建一个input,正在mx.txt的前方添加一个input:CheckBox.在v-model加上你每次创建出来的mx.check 最重点就在于forEach遍历,出来的都是当前的. 有些人不注意的一点,为什么data里面没有check:[]这样的出现. data里的是实时监控,你点一次自动将所有的check都变成了true. <template> <div class="

  • jquery、js操作checkbox全选反选

    操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

  • javascript 全选/反选,取消选择效果

    其实这个效果不难做. 难做的是 如何让用户使用起来方便. 第一个checkbox实现了 全选 反选 最后个checkbox实现了 取消选择 这里只是做一个 JS实例罢了. 这段HTML并没有 实际的价值. javascript 全选/反选效果. 标题 时间 我们 2010-02-02 我们 2010-02-02 我们 2010-02-02 我们 2010-02-02     var $=function(id){return document.getElementById(id);}; var

  • vue使用vant中的checkbox实现全选功能

    本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下 <template> <div class="visiblePeople"> <topbar /> <ul class="list clear_float"> <li v-for="(item, index) in people" :key="index"> &

随机推荐