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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vant中的toast层级改变操作
Nov 04 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
通过文字传递创建的图形按钮
2006/10/09 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript 写类方式之五
2009/07/05 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
js实现时间日期校验
2020/05/26 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python学习小技巧总结
2018/06/10 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python匿名函数的使用方法解析
2019/10/10 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
教师节促销活动方案
2014/02/14 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
毕业评语大全
2014/05/04 职场文书
争先创优活动总结
2014/08/27 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记
vue router 动态路由清除方式
2022/05/25 Vue.js