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 相关文章推荐
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
vue如何截取字符串
May 06 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
js的event详解。
2006/09/06 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python list删除元素时要注意的坑点分享
2018/04/18 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python实现学员管理系统
2019/02/26 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
什么是Python中的匿名函数
2020/06/02 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
extern是什么意思
2016/03/10 面试题
几道Java和数据库的面试题
2013/05/30 面试题
水利学院求职自荐书
2014/02/01 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
运动会开幕词
2015/01/28 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL