<!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执行命令参数详解

    一.概述前面的章节我们讲解了webpack的安装.webpack.config.js的 基本配置.webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个 ...

  2. Java代理模式之动态代理

    动态代理类的源码是程序在运行期间由JVM根据反射等机制动态生成的,所以不存在代理类的字节码文件.代理角色和真实角色的联系在程序运行时确定! Java中有两种动态代理,一种是JDK自带的,另一种的CGL ...

  3. 如何使用一次for循环得到数组中第二大的数和第三大的数

    装载声明:http://blog.csdn.net/lxsmk9059/article/details/77920206?locationNum=1&fps=1 ,,,,,,,,}; ]; ] ...

  4. JVM学习六：JVM之类加载器之双亲委派机制

    前面我们知道类加载有系统自带的3种加载器,也有自定义的加载器,那么这些加载器之间的关系是什么,已经在加载类的时候,谁去加载呢?这节,我们将进行讲解. 一.双亲委派机制 JVM的ClassLoader采 ...

  5. 由浅入深理解----java反射技术

    java反射机制详解 java反射机制是在运行状态下,对任意一个类可以获取该类的属性和方法,对任意一个对象可以调用其属性和方法.这种动态的获取信息和调用对象的方法的功能称为java的反射机制 clas ...

  6. Python基础-week05

    本节大纲:Author:http://www.cnblogs.com/Jame-mei 模块介绍 time & datetime模块 random os sys shutil json &am ...

  7. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  8. C#中的String类

    一.String类的方法 1. Trim():清除字符串两端的空格 2. ToLower():将字符串转换为小写 3. Equals():比较两个字符串的值,bool 4. IndexOf(value ...

  9. Python 自学 之 String 常见操作

    这是在Python 3.5.3版本下测试的.# Author Taylor_Manitoname ="my name is alex"#capitalized 大写的print(& ...

  10. 如何在http请求中使用线程池（干货）

    这段时间对网络爬虫比较感兴趣,实现起来实际上比较简单.无非就是http的web请求,然后对返回的html内容进行内容筛选.本文的重点不在于这里,而在于多线程做http请求.例如我要实现如下场景:我有N ...