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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：

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

赞 (0)

相关推荐

  • Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接.如果涉及更复杂的逻辑,你应该使用计算属性. 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 通常情况下,使用计算属性会比使用过程式的$watch回调更合适.比如下面的例子: <div id="demo">{{fullNa

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • Vue自定义指令实现checkbox全选功能的方法

    最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进. 上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • Vue计算属性的使用

    我们都知道在Vue构造函数的参数对象中有一个[data]属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于[data]中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在[data]中是做不到的,于是Vue为我们提供了[计算属性] 一.计算属性 1.1 概述 计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕

  • vue.js实现的全选与全不选功能示例【基于elementui】

    本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o

  • Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp

  • vue2.0在table中实现全选和反选的示例代码

    vue2.0在table中实现全选和反选的示例代码

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的  git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

  • vue计算属性get和set用法示例

    vue计算属性get和set用法示例

    本文实例讲述了vue计算属性get和set用法.分享给大家供大家参考,具体如下: 计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护. 换句话说,就是可以自己设置值(b值),这个值和data下定义的值(a值)存在某些关系,b的值是基于a的值,通过某些逻辑产生出来的值,b值可以直接拿到template里去用.当a的值发生变化的时候,b的值会跟着变化.就是计算属性中的默认值get.那set又是什么鬼? b的值是基于a的变化而变化的,那么直接修改b的值的时候,会怎么样?

  • vue实现全选、反选功能

    vue实现全选、反选功能

    用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中了一个,那么父级应该被勾选中 如果子集一个都没有选中,那么父级此时应该没有选中 最后提交用户改变后的数组 (大神原谅我的啰嗦哈) 开始上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • Vue computed计算属性的使用方法

    computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('

随机推荐