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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
详解vue项目打包步骤
Mar 29 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
显示、隐藏密码
2006/07/01 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python Requests 基础入门
2016/04/07 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
护理专业本科生自荐信
2013/10/01 职场文书
后勤园长自我鉴定
2013/10/17 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
打架检讨书400字
2014/01/17 职场文书
回门宴父母答谢词
2014/01/26 职场文书
丑小鸭教学反思
2014/02/03 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书