当前位置：首页 > article >正文

vue2的计算属性

article 2025/2/24 19:49:39

在 Vue 2 中，计算属性 (computed properties) 是基于其他数据属性计算得出的属性。计算属性本身是只读的，不能直接修改其值。如果你需要修改计算属性的值，通常需要修改其依赖的数据属性。

假设你有一个计算属性 fullName，它依赖于 firstName 和 lastName：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

如果你想修改 fullName，你需要修改 firstName 或 lastName：

// 修改 firstName 和 lastName
this.firstName = 'Jane';
this.lastName = 'Smith';

如果你希望直接修改计算属性，可以使用计算属性的 getter 和 setter。例如：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
});

this.fullName = 'Jane Smith';

这样，firstName 会变成 Jane，lastName 会变成 Smith。

注意： 在计算属性set当中不可以直接修改。例如this.fullName = newValue。

computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
        this.fullName = newValue;
      }
    }
  }