vue实现简单全选和反选功能


Posted in Javascript onSeptember 15, 2020

本文实例为大家分享了vue实现简单全选和反选的具体代码,供大家参考,具体内容如下

vue实现简单全选和反选功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 700px;
      text-align: center;
    }
    tr,
    th {
      height: 40px;
    }
  </style>
  <script src="../vue.js"></script>
</head>

<body>
  <div class="box">
    <table cellspacing='0' border="solid 1px">
      <thead>
        <tr>
          <th>全选<input type="checkbox" v-model='isAllChecked'></th>
          <th>id</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in goods'>
          <td><input type="checkbox" v-model='item.isCheck'></td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.num}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    var vm = new Vue({
      el: '.box',
      methods: {
      },
      data: {
        goods: [
          {
            id: 20200905,
            name: '苹果',
            price: 3,
            num: 12,
            isCheck: false,
          },
          {
            id: 20200905,
            name: '香蕉',
            price: 2,
            num: 33,
            isCheck: false,
          },
          {
            id: 20200905,
            name: '橘子',
            price: 4,
            num: 44,
            isCheck: false,
          },
        ]
      },
      computed: {

        isAllChecked: {
          /* 
           this.goods.every(el=>el.isCheck)返回结果为true 或者false

          遍历下方每一个isCheck的状态、
            1、 都选中返回true---------即全选为true,
            2、 有一个没选中返回false---即全选为false
          */
          get() {
            return this.goods.every(el => el.isCheck)
          },
          set(val) {
            // 全选的状态true、false两种状态
            console.log(val);

            // val为true即全选的时候、下方每一个isCheck也是true
            // val为false即全选的时候、下方每一个isCheck也是false
            return this.goods.forEach(el => el.isCheck = val);
          }
        }
      }
    })
  </script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
js实现图片上传即时显示效果
Sep 30 Javascript
vscode 调试 node.js的方法步骤
Sep 15 #Javascript
js实现特别简单的钟表效果
Sep 14 #Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 #Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
JavaScript实现串行请求的示例代码
Sep 14 #Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
列表内容的选择
2006/06/30 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
《黄河颂》教学反思
2014/02/07 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
抽样调查项目计划书
2014/04/24 职场文书
创文明城市标语
2014/06/16 职场文书
升学宴答谢词
2015/01/05 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
母亲节寄语大全
2015/02/27 职场文书
工地材料员岗位职责
2015/04/11 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
初中政治教学工作总结
2015/08/13 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技