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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
各种常用的JS函数整理
Oct 25 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
手写实现JS中的new
Nov 07 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
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
jQuery 操作XML入门
2008/12/25 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python select.select模块通信全过程解析
2017/09/20 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python怎么对数字进行过滤
2020/07/05 Python
Python如何输出百分比
2020/07/31 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
UNIX文件系统分类
2014/11/11 面试题
市场部专员岗位职责
2013/11/30 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
超市国庆节促销方案
2014/02/20 职场文书
医学生求职自荐书
2014/06/12 职场文书
违反交通法规检讨书
2014/09/10 职场文书
还款承诺书范本
2015/01/20 职场文书
初中语文教学随笔
2015/08/15 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
详解Python flask的前后端交互
2022/03/31 Python