<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
   <div id='app' class='container'>
    <input type="checkbox" name="" id="allId" v-model="allData.parCheck" @change="allSelect()">
    <label for="allId">{{allData.text}}</label> {{allData.parCheck}}
    <ul>
        <li v-for="item in checkData">
            <input type="checkbox" name="" @change="singleSelect()" v-model="item.isCheck" :id="item.id">
            <label :for="item.id">{{item.value}}</label> {{item.isCheck}}
        </li>
    </ul>
   </div>
<script>
 
    var app = new Vue({
    el: '#app',
    data: {
    allData: {
        parCheck: false,
        text: '全选'
    },
    checkData: [{
        id: '1',
        value: '香蕉',
        isCheck: false
    }, {
        id: '2',
        value: '苹果',
        isCheck: false
    }, {
        id: '3',
        value: '梨子',
        isCheck: false
    }, {
        id: '4',
        value: '菠萝',
        isCheck: false
    }, {
        id: '5',
        value: '西瓜',
        isCheck: false
    }]
 },
 methods: {
    allSelect() {
        var vm = this;
        vm.checkData.forEach(item => {
            item.isCheck = vm.allData.parCheck
        })
    },
    singleSelect() {
        var vm = this;
        var selectData = vm.checkData.filter(item => {
            return item.isCheck == true
        })

        selectData.length == vm.checkData.length ? vm.allData.parCheck = true : vm.allData.parCheck = false;
    }
 }
})
</script>
</body>
</html>vue

vue中实现全选功能的更多相关文章

  1. vue实现checked 全选功能

    记录一下 module.data = {  result: {}, items: [] //初始化全选按钮, 默认不选 ,isCheckedAll: false};module.vue = new V ...

  2. 第八十二篇：Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  3. Java Swing 如何实现记事本中“编辑”菜单下的 剪切，复制，粘贴，删除，全选 功能

    这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l)  给JButton添加一个鼠标点击监听器l ...

  4. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  5. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  6. 用Vue实现一个全选指令

    最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...

  7. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  8. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  9. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

随机推荐

  1. 走近webpack（0）--正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...

  2. shell基本命令学习

    Shell是一种脚步语言,那么,就必须有解释器来执行这些脚步. Unix/Linux上常见的shell脚步解释器有bash,sh,csh,ksh等,习惯把它们称为shell. 例如: #!/bin/b ...

  3. 透析thinkphp5升级版开发框架tpframe

    这里将全面的介绍这个框架给我们开发带来的好处,让你们对它有更深层次的认识,喜欢或不喜欢的,欢迎大家前来留言讨论 一.目录层次结构 现在很多的项目,特别是大一点的项目里面,都会有很多的人参与,要进行程序 ...

  4. java必学的5种排序算法

    第一种冒泡排序 第二种 选择排序 第三种.插入排序

  5. kill-mysql-sleep.sh

    #!/bin/bash #while : #do n=`/usr/bin/mysqladmin -uroot -pXXXXX processlist | grep -i sleep | wc -l` ...

  6. 爬虫（BeautifulSoup--select--class的选择）

    <div class="item name" title="中央公园"> <a href="/Attraction_Review-g ...

  7. 四十六、android中的Bitmap

    四十六.android中的Bitmap: http://www.cnblogs.com/linjiqin/archive/2011/12/28/2304940.html 四十七.实现调用Android ...

  8. vs运行单个cpp文件

    打开vs,新建项目,左侧win32见上图,右侧 win32控制台应用程序,填好名称后,确定----下一步,如下图,空项目 紧接着如下图,通过现有项添加自己的cpp文件,便可以运行了

  9. MyAdapter Andriod

    private List<T> listdate;//定义数据对象 //为了获取item中的点击事件定义ViewHolderprivate static class ViewHolder ...

  10. c语言一,二数组

    一.PTA实验作业 题目1:7-4 简化的插入排序 1. 本题PTA提交列表 2. 设计思路 1.定义整形变量N,temp,i. 2.输入N 3.通过for(i=1;i<=N;i++)的循环语句 ...