vue 计算属性

作者：嗜神魔影发布日期:2025-07-01 浏览:42

// Vue 计算属性示例代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性用于处理数据的复杂逻辑，结果会自动更新
    reversedMessage: function () {
      // 返回反转后的 message
      return this.message.split('').reverse().join('');
    },
    fullName: function () {
      // 返回拼接后的全名
      return this.firstName + ' ' + this.lastName;
    }
  }
});

解释说明：

data：定义了组件中的数据属性，如 message, firstName 和 lastName。
computed：定义了计算属性。计算属性依赖于 data 中的数据，并且会在相关数据变化时自动重新计算。
- reversedMessage：将 message 的内容进行反转。
- fullName：将 firstName 和 lastName 拼接成一个完整的名称。

计算属性的结果会被缓存，只有在依赖的数据发生变化时才会重新计算，因此性能更好。

上一篇：vue3+ts

下一篇：vue foreach