vuejs中的计算属性到底是什么?

太长,读不下去了 :计算属性是Vue中的getter/setter。

computed: {
  someComputed() {
    return `${this.foo} ${this.bar}`;
  }
}

等同于

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
  }
}

也可以有一个设置器:

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
    set: function(fooBar) {
      const fooBarArr = fooBar.split(' ');
      this.foo = fooBarArr[0];
      this.bar = fooBarArr[1];
    }
  }
}

• 一 吸气剂 :查找该属性时函数运行;用法:

this.someComputed // returns the computed current value, running the getter.

• 塞特

this.someComputed = value; // sets the computed current value, running the setter.

getters 和 setters 在Javascript中。

Vue computed properties .

你可以使用计算属性,例如当你有一些逻辑什么会炸毁你的模板。

为此,您可以使用计算道具,这些道具通常做一些简单的事情,如:

  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }

或者另一个很好的例子,如果你有一些货币,你想格式化它与千分隔符和欧元签署在最后。

像这样:

<div>{{reversedMesage}}</div>

每次,当你计算的属性中使用的任何变量发生变化时,vue vill都会处理它,并重新计算你的计算属性。

假设您有以下条件:

  computed: {
    prettyAmount: function () {
      return this.amount + ' ' + this.currency.toUpperCase()
    }
  }

<div>{{prettyAmount}}</div>