computed选项

计算属性

computed选项Demo

<template>
  <div id="Application">
    <div>count值：{{count}}</div>
    <div>type值：{{type}}</div>
    <button @click="add">Add</button>
    <div>set()方法调用情况：{{msg}}</div>
    <button @click="change">Change</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count:0,
      msg: "set方法未被调用"
    }
  },
  computed: {
    type: {
      get() {
        return this.count > 3 ? "大" : "小"
      },
      set(newValue) {
          this.msg = "set方法被调用";
      }
    }
  },
  methods: {
    add() {
      this.count ++
    },
    change(){
        // 直接改变计算属性的值才能触发set方法的调用
        this.type="大大的";
    }
  }
};
</script>

函数实现计算属性

函数实现计算属性

<template>
  <div id="Application">
    <div>count值：{{count}}</div>
    <div>type值：{{typeFunc()}}</div>
    <button @click="add">Add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count:0,
    }
  },
  methods: {
    add() {
      this.count ++
    },
    typeFunc() {
      return this.count > 3 ? "大" : "小"
    }
  }
};
</script>