Vue计算属性computed的 get() 和 set() 方法的应用场景 : 全选

最新推荐文章于 2024-05-15 23:30:21 发布

小王几pl

最新推荐文章于 2024-05-15 23:30:21 发布

阅读量2.5k

点赞数 4

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_50336155/article/details/112790538

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

其实计算属性中还有 get 和 set 方法

举个’栗子’ 下面是页面结构

需求 :

多选框全都选中 >> 全选框 – 选中
其他多选框没有全部选中 >> 全选框 – 不选中
点击选中全选框 >> 其他多选框要 – 全都被选中
点击全选框取消选中 >> 其他多选框也 – 全都不选中

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
    <div id="app">
    <p>请选择个人爱好</p>
    <!-- 这里注意不要用 :checked="xx" 绑定选中状态 这样并不能形成双向绑定的作用 -->
    <p><input type="checkbox" v-model="checkAll">全选 checkAll : {{ checkAll }}</p>
    <p><input type="checkbox" v-model="eat">吃饭 eat : {{ eat }}</p>
    <p><input type="checkbox" v-model="sleep">睡觉 sleep : {{ sleep }}</p>
    <p><input type="checkbox" v-model="play">打豆豆 play : {{ play }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        eat: false,
        sleep: false,
        play: false
      }
    })
  </script>
</body>

</html>

计算属性的get() : 从计算属性中获取值的时候触发

比如 : {{ checkAll }} 调用计算属性时会触发(页面刚加载时也会触发)

其中的数据刷新 {{ checkAll }} 重新调用再次触发

computed: {
        // 全选按钮 v-model绑定
        checkAll: {
          get() {
            // 根据 多选框是否全被选中 来控制 全选框是否选中
            return this.eat & this.sleep & this.play
          }
        }
      }

计算属性的set() : 给计算属性赋值时触发

比如: 再此点击全选框时

computed: {
        // 全选按钮 v-model绑定
        checkAll: {
          get() {
            // 根据 多选框是否全被选中 来控制 全选框是否选中
            return this.eat & this.sleep & this.play
          },
          // 全选框的 选中状态改变 -> 点击全选框时会触发
          set(val) {  //val 是绑定的计算属性值 -> 全选框的为 true / false
            // 让多选框的选中状态跟全选框的选中状态一样
            this.eat = val
            this.sleep = val
            this.play = val
          }
        }
      }

小王几pl

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性computed的 get() 和 set() 方法的应用场景 : 全选

其实计算属性中还有 get 和 set 方法举个’栗子’ 下面是页面结构需求 :多选框全都选中 >> 全选框 – 选中其他多选框没有全部选中 >> 全选框 – 不选中点击选中全选框 >> 其他多选框要 – 全都被选中点击全选框取消选中 >> 其他多选框也 – 全都不选中 <!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫