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

 更新时间:2019年02月08日 12:06:53   作者:cofecode   我要评论

这篇文章主要介绍了vue基于两个计算属性实现选中和全选功能,结合实例形式分析了vue计算属性get及set操作页面元素实现选中与全选功能相关操作技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • 解决VUEX刷新的时候出现数据消失

    解决VUEX刷新的时候出现数据消失

    这篇文章主要介绍了解决VUEX刷新的时候出现数据消失,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue.js提交按钮时进行简单的if判断表达式详解

    vue.js提交按钮时进行简单的if判断表达式详解

    这篇文章主要给大家介绍了关于vue.js提交按钮时如何进行简单的if判断表达式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • Vue 项目代理设置的优化

    Vue 项目代理设置的优化

    这篇文章主要介绍了Vue 项目代理设置的优化功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue中七牛插件使用的实例代码

    vue中七牛插件使用的实例代码

    本篇文章主要介绍了vue中七牛插件使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS框架之vue.js(深入三:组件1)

    JS框架之vue.js(深入三:组件1)

    这篇文章主要介绍了JS框架之vue.js component组件的相关资料,本文通过实例详解的方式给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解vue-loader在项目中是如何配置的

    详解vue-loader在项目中是如何配置的

    这篇文章主要介绍了详解vue-loader在项目中是如何配置的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue和react等项目中更简单的实现展开收起更多等效果示例

    vue和react等项目中更简单的实现展开收起更多等效果示例

    这篇文章主要介绍了vue和react等项目中更简单的实现展开收起更多等效果示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • 浅谈Vue的加载顺序探讨

    浅谈Vue的加载顺序探讨

    本篇文章主要介绍了Vue的加载顺序探讨,详细的介绍了加载顺序以及如何判断所有的子组件加载完成。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Element-ui之ElScrollBar组件滚动条的使用方法

    Element-ui之ElScrollBar组件滚动条的使用方法

    这篇文章主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Element UI框架中巧用树选择器的实现

    Element UI框架中巧用树选择器的实现

    这篇文章主要介绍了Element UI框架中巧用树选择器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论