<!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. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  2. Java NIO之套接字通道

    1.简介 前面一篇文章讲了文件通道,本文继续来说说另一种类型的通道 -- 套接字通道.在展开说明之前,咱们先来聊聊套接字的由来.套接字即 socket,最早由伯克利大学的研究人员开发,所以经常被称为B ...

  3. Algorithm --> 阶乘和因子

    阶乘和因子 要求:输入正整数n(1<n <101), 把阶乘n!=1x2x3x...xn分解成素因子相乘的形式,从小到大输出各个素数(2,3,5,...)的指数. 例如825=3x52x1 ...

  4. 查看http的并发请求数与其TCP连接状态

    [root@new-web7 ~ ::]#netstat -na | awk '/^tcp/ {++S[$NF]} END {for(i in S) print i, S[i]}' TIME_WAIT ...

  5. R语言-逻辑回归建模

    案例1:使用逻辑回归模型,预测客户的信用评级 数据集中采用defect为因变量,其余变量为自变量 1.加载包和数据集 library(pROC) library(DMwR)model.df <- ...

  6. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. Java日志框架：logback详解

    为什么使用logback 记得前几年工作的时候,公司使用的日志框架还是log4j,大约从16年中到现在,不管是我参与的别人已经搭建好的项目还是我自己主导的项目,日志框架基本都换成了logback,总结 ...

  8. 【分布式系列之dubbo】dubbo管理工具dubbo-admin安装使用

    一.安装完成后界面显示 二.安装 1.下载dubbo-admin安装包 2.修改WEB-INF下的dubbo.properties文件内容 dubbo.registry.address=zookeep ...

  9. 实验四Java Android简易开发

    实验准备 Android Studio下载 Android Studio安装 实验内容 Android Stuidio的安装测试 Android Stuidio的安装测试: 参考<Java和An ...

  10. APP的案例分析-美团外卖

    大一才开始用软件订外卖了,很方便  ,上手快只要注册个账号登陆即可,支付时自动跳转到其他支付应用.严重的bug也没有,只有之前一段时间通过首单可以刷优惠,之后也修复了. 身边的同学也很多都在用.方便省 ...