vue中computed计算属性的使用例子

好的，下面是一个简单的Vue组件，其中使用了computed计算属性：

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      message: 'Hello World'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在上面的例子中，我们定义了两个computed属性：fullName和reversedMessage。fullName依赖于firstName和lastName两个data属性，而reversedMessage则依赖于message属性。computed属性会在它所依赖的属性发生变化时自动更新，因此我们不需要手动更新这些属性。

在模板中，我们可以像访问普通的data属性一样访问computed属性。例如，我们在h1元素中展示了fullName属性，而在p元素中展示了reversedMessage属性。