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 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
原生javascript获取元素样式
Dec 31 Javascript
Javascript中For In语句用法实例
May 14 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
vue中实现动态生成二维码的方法
Feb 21 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缓存集成库phpFastCache用法
2014/12/15 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Opacity.js
2007/01/22 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
js css自定义分页效果
2017/02/24 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python 爬虫图片简单实现
2017/06/01 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
自荐信结尾
2013/10/27 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
高一英语教学反思
2014/01/22 职场文书
年度考核自我鉴定
2014/03/19 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python