vue基于两个计算属性实现选中和全选功能示例


Posted in Javascript onFebruary 08, 2019

本文实例讲述了vue基于两个计算属性实现选中和全选功能。分享给大家供大家参考,具体如下:

还是选中和全选功能,用两个计算属性来实现,别人的代码,思维确实不一样。学习了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue选中和全选</title>
  <style>
    table, td, th{
      border:1px solid #ebebeb;
      border-collapse:collapse;
      text-align: center;
    }
    table {
      width:500px;
    }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
  <div class="app">
    <table>
      <thead>
        <tr>
          <th style="line-height: 38px">选中数
            {{checkedCount}}<input type="checkbox" v-model="allchecked" style="zoom:200%;vertical-align: middle">
          </th>
          <th>name</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list">
          <td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    var list=[
      {
        name:'小明',
        age: 23,
        checked: false
      },
      {
        name:'小红',
        age: 2,
        checked: true
      },
      {
        name:'小蓝',
        age: 23,
        checked: true
      },
      {
        name:'小bai',
        age: 40,
        checked: true
      },
      {
        name:'王小二',
        age: 18,
        checked: false
      }
    ]
    new Vue({
      el: '.app',
      data: {
        list
      },
      computed: {
       allchecked: {
        // getter
        get: function () {
         return this.list.length == this.checkedCount
        },
        // setter
        set: function (val) {
          //val就是点击之后,全选按钮的v-model值(状态),勾上后就是val的值就是true。未勾上就是false
          console.log(val)
          this.list.forEach(item => {
           item.checked = val
          })
        }
       },
       checkedCount: {
        // getter
        get: function () {
         var i = 0
         this.list.forEach(item => {
           if (item.checked === true) i++
         })
         return i
        }
       }
      }
    })
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

vue基于两个计算属性实现选中和全选功能示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
js表格分页实现代码
Sep 18 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
vue计算属性get和set用法示例
Feb 08 #Javascript
vue多次循环操作示例
Feb 08 #Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 #Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 #Javascript
Vue从TodoList中学父子组件通信
Feb 05 #Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 #Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 #Javascript
You might like
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python抖音表白程序源代码
2019/04/07 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
争先创优演讲稿
2014/09/15 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
浅谈Python协程asyncio
2021/06/20 Python