代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

            <div v-for="list,index in lists">

                <label :for="index">

                    {{list.name}}<input :id="index" type="checkbox" :value="list.name" v-model="checkboxArr"> //这里注意list.name这个值一定要和checkAll函数中绑定的红色的值要一样

                </label>

            </div>

        <label>

            <input type="checkbox" class="checkbox" @click="selectAll" />{{checkAllAddTxt}}

        </label>

    </div>

    <script src="vue.js"></script>

    <script>

        window.onload = function () {

            var c = new Vue({

                el: '#app',

                data: {

                    checkboxArr: [],

                    lists: [{ // lists是从接口拿到的要遍历带有checkbox的数据

                        'name': ''

                    }, {

                        'name': ''

                    }, {

                        'name': ''

                    }, {

                        'name': ''

                    }],

                    checkAllAddTxt: '全选' // 作为全选 取消全选的显示文字

                },

                methods: {

                    selectAll: function (event) {

                        var _this = this;

                        if (!event.currentTarget.checked) {

                            this.checkboxArr = []; // 取消全选

                            this.checkAllAddTxt = '全选';

                        } else { // 实现全选

                            _this.checkboxArr = [];

                            _this.lists.forEach(function (list, i) {

                                _this.checkboxArr.push(list.name);

                            });

                            this.checkAllAddTxt = '取消全选';

                        }

                    }

                }

            });

        };

    </script>

</body>

</html>

.

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. cassandra删除所有数据，重置为初始状态——删除<data dir>/data/* <data dir>/commitlog/* <data dir>/saved_caches/* 重启cassandra即可

    Are you looking for a method other than drop keyspace? Okay based on your clarification... I would s ...

  2. 【转】zip() 函数

    描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 * 号操作符 ...

  3. 【转载】SQL面试题

    [本文转自]http://blog.csdn.net/u012467492/article/details/46790205 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   ...

  4. 堆与栈（JAVA）——以String str="abc"的深度含义解释

    栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆.   栈的优势是,存取速度比堆要快,仅次于直接位于CPU中的 ...

  5. POJ3233:Matrix Power Series(矩阵快速幂+递推式)

    传送门 题意 给出n,m,k,求 \[\sum_{i=1}^kA^i\] A是矩阵 分析 我们首先会想到等比公式,然后得到这样一个式子: \[\frac{A^{k+1}-E}{A-E}\] 发现要用矩 ...

  6. Vijos P1782 借教室 ( 前缀和&&差分序列）

    题目链接:借教室 题意:给出n天得教室数目,m个借教室得单子,按顺序借教室,问哪个单子不满足并输出 分析:可以用线段树做,会T,常数比较大,选择用差分序列维护前缀和,二分答案即可 #include&l ...

  7. js 几秒之后就不断的执行

     function url()    { $.ajax({            url: "AA.ashx",            data: { ID: "gggg ...

  8. linux unzip和zip

    注:*压缩成限.zip格式文件 常用解压缩: [root@mysql test]# unzip -o test.zip -d tmp/ 将压缩文件test.zip在指定目录tmp下解压缩,如果已有相同 ...

  9. 《Windows核心编程系列》十三谈谈在应用程序中使用虚拟内存

    在应用程序中使用虚拟内存 Windows提供了以下三种机制对内存进行操控: 一:虚拟内存.最适合来管理大型对象数据或大型结构数组. 二:内存映射文件.最适合用来管理大型数据流,以及在同一机 器上运行的 ...

  10. 解决上传到github报错Successfully created project 'autotest' on GitHub, but initial commit failed:

    通过IDEA上传代码到GitHub上可是有时候会碰到这样的问题. 当我们选择VCS->Import into Version Control->Share Project on GitHu ...