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加密解密7种方法总结分析
Oct 07 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python文件和文件夹复制函数
2020/02/07 Python
python实现图像外边界跟踪操作
2020/07/13 Python
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
表决心的诗句大全
2014/03/11 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
面试感谢信范文
2015/01/22 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python