[30天 Vue学好学满 DAY6] 计算属性(Computed)

计算属性(Computed)

无传入值
具回传值(return)
对来源属性进行操作-> 触发
即使来源变数无实际异动(true -> true)，也进行触发

实作

定义变数count

data() {
    return {
      count: 0,
    };
 },

定义方法: 按下按钮 count + 1

methods: {
    addValue: function () {
        this.count += 1;
    },
},

定义计算属性

computed: {
    lessThenTen() {
      console.log('run lessThenTen')
      return this.count < 10;
    },
    greaterThenTen() {
      console.log("run greaterThenTen")
      return this.lessThenTen ? "" : "greaterThenTen!";
    },
},

执行测试:初始时计算属性各进行一次

计数器:9 & 计算属性:触发10次

计数器:10，显示。

Getter and Setter 写法

默认只有Getter，需要时可进行 Setter 定义
get:所依赖变数异动时执行，return新结果。
set:将异动结果传入set里。并进行处理。(无相关变数无法进行操作且无效)

HTML

<button @click="switchValue">switch</button>
<h3>{{ text  }}</h3>
<h3>{{ valueA  }}</h3>
<h3>{{ valueB  }}</h3>

Data 定义初始值

data() {
    return {
      text: "text",
      valueA: "valueA",
      valueB: "valueB"
    };
},

定义方法:按下按钮调整valueA、valueB

switchValue: function () {
    this.valueA = "valueA_click";
    this.valueB = "valueB_click";
},

计算属性

value: {
    // getter
    get: function () {
        return this.valueA + " " + this.valueB;
    },
    // setter
    set: function (newValue) {
        var values = newValue.split(" ");
        this.text = values[0]; // text与依赖值无关、无效
        this.valueA = values[0];
        this.valueB = values[1] + "test"; // test与传入值无关、无效
    },
},

测试结果