vue2 计算属性

作者：疾风雨辰发布日期:2026-04-01 浏览:90

// Vue 2 计算属性示例

// 引入 Vue
import Vue from 'vue';

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    firstName: 'John',
    lastName: 'Doe'
  },
  // 计算属性
  computed: {
    // 计算属性的 getter 函数
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('');
    },
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

/*
解释说明：
1. `reversedMessage`: 这是一个计算属性，它会监听 `message` 的变化。每当 `message` 发生变化时，`reversedMessage` 会自动重新计算并返回反转后的字符串。
2. `fullName`: 另一个计算属性，它会监听 `firstName` 和 `lastName` 的变化。当这两个数据项中的任何一个发生变化时，`fullName` 会自动更新为新的全名。
*/

上一篇：vue 数组增加数据

下一篇：vue 图标