〖Vue〗必备小知识之 Vue 计算属性 computed

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

Vue2.x computed 计算属性:

Vue computed 计算属性

• 是一个函数，使用的是它的返回值
• 也可以进行双向绑定(setter,getter)

双向绑定值调色板 1,2

双向绑定值调色板 方法1 实现效果:

双向绑定值调色板 实现代码 及 每步注释

<div id="box">
  <input type="text" v-model="color" /> {{ color }}
  <div id="colorBox" :style="{'background': color}">第三方第三方</div>
</div>

<script>
  new Vue({
    el: '#box',
    data: {
      r: '',
      g: '',
      b: '',
    },
    computed: {
      color: {
        get(){
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        },
        set(value) {
          var colorStr = value.substring(4, v.length-1)
          var colorArr = colorStr.split(",")
          this.r = colorArr[0]
          this.g = colorArr[1]
          this.b = colorArr[2]
        }
      }
    },
  })
</script>

双向绑定值调色板 方法2 实现效果:

双向绑定值调色板 实现代码 及 每步注释

<div id="box">
  <input type="text" v-model="color" /> {{ color }}
  <div id="colorBox" :style="{'background': getColor}">第三方第三方</div>
</div>

<script>
  new Vue({
    el: '#box',
    data: {
      r: '',
      g: '',
      b: '',
    },
    computed: {
      color: {
        get(){
          return `${this.r}, ${this.g}, ${this.b}`
        },
        set(value) {
          var colorStr = value.split(/\s+/)

          this.r = Math.min(colorArr[0], 255)
          this.g = Math.min(colorArr[1], 255)
          this.b = Math.min(colorArr[2], 255)
        }
      },
      getColor(){
        return `rgb(${this.r}, ${this.g}, ${this.b})`
      }
    },
  })
</script>

上面小栗子, 通过 v-model 语法糖绑定输入框的值, 并通过计算属性 computed 自动计算出对应的值来进行显示;

日积月累, 一个大目标是分成多个小小目标一步步完成的, 没有啃不下的硬骨头! 同学们 一起加油吧!!

下文学习 动态组件

<component :is=”组件的名字”></component>

<keep-alive></keep-alive> 对内容进行缓存

动态组件

小练习: Tab 选项卡