Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.
1.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>
2.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:false
}
}
}
</script>
3.watch
类型:
Object
详细:
一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用
$watch()
。
示例:
var vm = new Vue({
data: {
a:
},
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 = // -> new: 2, old: 1
Vue.js实现checkbox的全选和反选的更多相关文章
- 使用vue.js实现checkbox的全选和多个的删除功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- js中checkbox的全选和反选的实现
<head> <meta charset="utf-8"/> <script type="text/javascript"> ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
- 通过VBA实现checkbox的全选和反选
checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click() ‘checkbox为总控 ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- checkbox之全选和反选
先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...
随机推荐
- CSS常用布局学习笔记
水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
- 支持“ApplicationDbContext”上下文的模型已在数据库创建后发生更改
异常信息 解决方法: 1.PM> Enable-Migrations 2.打开生成的Configuration.cs文件,修改代码如下 public Configuration() { Auto ...
- HDU 5976 数学,逆元
1.HDU 5976 Detachment 2.题意:给一个正整数x,把x拆分成多个正整数的和,这些数不能有重复,要使这些数的积尽可能的大,输出积. 3.总结:首先我们要把数拆得尽可能小,这样积才会更 ...
- 从Erlang进程看协程思想
从Erlang进程看协程思想 多核慢慢火了以后,协程类编程也开始越来越火了.比较有代表性的有Go的goroutine.Erlang的Erlang进程.Scala的actor.windows下的fibr ...
- 通过arcgis在PostgreSQL中创建企业级地理数据库
部署环境: Win7 64位旗舰版 软件版本: PostgreSQL-9.1.3-2-windows-x64 Postgis-pg91x64-setup-2.0.6-1 Arcgis 10.1 SP1 ...
- Smart3D系列教程6之 《案例实战演练3——倾斜数据正射影像及DSM的生产》
一.前言 Wish3D出品的系列教程中,前面两讲分别讲述说明了小物件的照片三维重建.大区域地形的三维重建,从照片的直接导入至软件到通过Excel表格将区块导入处理,从不同的模型类别.不同的导入方式演示 ...
- 不同类型的指针+1之后增加的大小不同(a,&a的地址是一样的,但意思不一样)
main() { ]={,,,,}; ); printf(),*(ptr-)); } *(a+1)就是a[1],*(ptr-1)就是a[4], 执行结果是2, 5.&a+1不是首地址+1,系统 ...
- php 图片上传的公共方法(按图片宽高缩放或原图)
写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...
- JSP页面以及JSP九大隐式对象
JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比 ...
- android——相对布局,表格布局
1.相对布局 RelativeLayout 又称作相对布局,也是一种非常常用的布局.和LinearLayout 的排列规则不同,RelativeLayout 显得更加随意一些,它可以通过相对定位的方式 ...