<!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. 笔记：Spring Cloud Ribbon RestTemplate 详解

    详细介绍RestTemplate 针对几种不同请求类型和参数类型的服务调用实现,示例代码中的 restTemplate 都是通过Spring 注入方式创建的,相关代码如下: @Autowired pr ...

  2. Logback.xml 给变量指定默认值

    随着通用日志组件转入 Slf4j,logback 也变成了默认的日志实现,像 log4j 一样,logback.xml 中也可以使用系统属性或环境变量,如 ${catalina.home}.在 log ...

  3. geotrellis使用（三十六）瓦片入库更新图层

    前言 Geotrellis 是针对大数据量栅格数据进行分布式空间计算的框架,这一点毋庸置疑,并且无论采取何种操作,其实都是先将大块的数据切割成一定大小的小数据(专业术语为瓦片),这是分治的思想,也是分 ...

  4. JavaScript(第三十二天)【Ajax】

    2005年Jesse James Garrett发表了一篇文章,标题为:"Ajax:A new Approach to Web Applications".他在这篇文章里介绍了一种 ...

  5. alpha冲刺第八天

    一.合照 二.项目燃尽图 三.项目进展 首页文章显示部分 首页小功能福大地图完成 四.明日规划 发现爬取的数据是一整个网页的内容,而我们需要的仅仅是教务处通知的文章,在筛选方面还需要改进,查找如何进行 ...

  6. Beta 第四天

    今天遇到的困难: 百度位置假死的问题研究发现并不是源于代码的问题,而是直接运行在主线程中会出现诸多问题 Fragment碎片刷新时总产生的固定位置的问题未果 今天完成的任务: 陈甘霖:修复了部分Bug ...

  7. Bate测试报告

    1 测试中找出的bug Bug类型 总数 描述 修复的bug 10 1.注册成功并没有直接跳转到登录页面: 2.学校地区无限制,数字也可以: 3.虽然相同用户名不能注册,但是只是显示,注册失败,却没有 ...

  8. Something about SeekingJob---Resume简历

    这几天脑子里满满的装的都是offer.offer.offer快到碗里来,但是offer始终不是巧克力,并没那么甜美可口易消化. 找工作刚开始,就遇到了不小的阻力,看到Boss直聘上各种与IT相关的工作 ...

  9. Session 和 Cookie 区别

    会话跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.==Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用 ...

  10. CDH:5.14.0 中 Hive BUG记录

    CDH5.14.0使用的HIVE版本: 自建表log: +----------------------------------------------------+--+ | createtab_st ...