vue计算属性

作者：依寞相随发布日期:2025-07-13 浏览:82

<template>
  <div>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    // 计算属性的函数
    reversedMessage() {
      // 返回 message 数据的反转字符串
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

解释说明：

data：定义了一个 message 属性，初始值为 'Hello Vue!'。
computed：定义了一个计算属性 reversedMessage，它依赖于 message。每当 message 发生变化时，reversedMessage 会自动重新计算并返回反转后的字符串。
模板部分：展示了原始的 message 和计算属性 reversedMessage 的值。

这种方式使得计算属性在依赖的数据发生变化时能够自动更新，而无需手动调用方法或监听数据变化。

上一篇：vue iframe

下一篇：vue 路由跳转