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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js中switch case循环实例代码
Dec 30 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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--用万网的接口实现域名查询功能
2012/12/13 PHP
php检测url是否存在的方法
2015/04/14 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jquery实现数字输入框
2017/02/22 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python 实现控制鼠标键盘
2020/11/27 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
班主任评语大全
2014/04/26 职场文书
公证委托书格式
2014/09/13 职场文书
2014年法务工作总结
2014/12/11 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript