所用知识点

1 v-model:监听input内容

2 watch:监听属性方法

参考https://cn.vuejs.org/v2/api/#watch

3 页面初始化调用函数 mounted

一:html元素

实现思路

1 v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里

2 watch函数来监听checkModel 属性,当其长度==input元素时 全选按钮选中 否则取消

3 全选按钮v-model checkAll 属性来显示当前选中状态 click事件里 当checkAll为true时 全选 所有input按钮被选中也就是checkModel的遍历存入其value值

完整代码:

备注:这里getUserData()函数并没有使用到只是为有序ajax请求渲染页面做铺垫

vue 全选与取消全选的更多相关文章

  1. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  2. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  3. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  4. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  5. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  6. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  7. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  8. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

  9. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  10. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

随机推荐

  1. 我的Android进阶之旅------>Android中查看应用签名信息

    一.查看自己的证书签名信息 如上一篇文章<我的Android进阶之旅------>Android中制作和查看自定义的Debug版本Android签名证书>地址:http://blog ...

  2. Java基础—数据类型

    Java的两大数据类型 基本数据类型 引用类型 Java程序中,new出来的对象存储在堆中(引用类型),但当使用new创建一个小的.简单的对象时,往往不是很有效,所以对于这些类型,Java不用new来 ...

  3. SSH远程登陆docker容器

    环境: Ubuntu 16.04(mac osx的VMware Fushion环境) 任务: Ubuntu 16.04通过SSH登陆docker(目的是为了运行在其他服务器的Jenkins访问dock ...

  4. 标准c字符和字符串的使用方法

    cppreference.com -> Standard C String & Character -> 详解 标准c字符和字符串 atof 语法:     #include &l ...

  5. Python函数之—— 装饰器(Day13)

    一.什么是装饰器 顾名思义,装饰器指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 二.装饰器需要遵循的原则 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数 ...

  6. cocos打包出现错误,执行命令出错,返回值:2。 Traceback (most recent call last): File "E:\cocos_workspace\MyGameOne\proj.android\build_native.py", line 43, in <module> build(opts.build_mode) File "E:\cocos_workspace\MyGa

    先看看NDK的版本,如果不行,就删除\proj.android\obj\local\armeabi下的文件.

  7. eclipse新建自定义EL函数

    ==================================================================================================== ...

  8. jQuery 中让我误解的那些方法

    至今我都不能说把 jQuery 中的方法在实践中都用了一遍, 一部分是用不到,一部分则是我未能体会它的魅力, 所以今天就来收录一下,那些从我们之间溜走的美丽. $.fn.add() 一开始对它的理解就 ...

  9. python爬虫之html解析Beautifulsoup和Xpath

    Beautiifulsoup Beautiful Soup 是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据.BeautifulSoup 用来解析 HTML 比较简 ...

  10. k-近邻算法 标签分类

    k-近邻算法根据特征比较,然后提取样本集中特征最相似数据(最邻近)的分类标签.那么,如何进行比较呢? 怎么判断红色圆点标记的电影所属的类别呢? 如下图所示. 答:距离度量.这个电影分类的例子有2个特征 ...