vue中计算属性的响应特性的案例

在Vue.js中，计算属性（Computed Properties）是一种特殊的属性，它们基于其他数据属性（通常是数据绑定的）的值动态地计算并返回结果。计算属性的主要特点是它是响应式的，即当其依赖的数据改变时，计算结果会自动更新。

举个简单的例子：

<template>
  <div>
    <!-- 绑定到计算属性的结果 -->
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  computed: {
    // 定义计算属性
    message: function () {
      // 当inputValue发生变化时，message会自动更新
      return this.inputValue.toUpperCase();
    }
  }
};
</script>

在这个例子中，当你在输入框中输入内容时，`inputValue`改变了，`message`计算属性会立即更新显示的大写版本。即使你直接在模板中引用`message`，Vue也能够跟踪它的变化，并在需要时自动刷新页面。