总是为绑定的类调用Vue.js函数

<!-- 正确示例：只在点击时调用函数 -->
<button @click="myFunction">Click Me</button>

computed: {
  myComputedProperty() {
    // 只有当依赖的响应式数据变化时，这里才会重新计算
    return this.someReactiveData + 1;
  }
}

<!-- 错误示例：不应在模板中直接调用 -->
<div>{{ myFunction() }}</div>

<!-- 正确示例：在事件中调用 -->
<button @click="myFunction">Click Me</button>

<template>
  <div :class="computedClass" @click="updateClass">
    Click me to change class
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  computed: {
    computedClass() {
      return {
        active: this.isActive
      };
    }
  },
  methods: {
    updateClass() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.active {
  color: red;
}
</style>