Introduction to computed properties in vue.js

The content of this article is an introduction to the calculated properties of vue.js. It has a certain reference value. Friends in need can refer to it

• computed method
  -Declares a computed property reversedMessage. The provided function will be used as a getter for the property vm.reversedMessage. vm.reversedMessage depends on vm.message. When vm.message changes, vm.reversedMessage will also be updated.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>

• #methods Methods
  -The effect is the same, but computed is based on its dependency cache, only when the relevant dependencies change Will be revalued. With methods, the function will always be called and executed again when re-rendering.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• Computed properties only have getters by default, but you can also provide a setter when needed: used to update the original properties

• computed method
  -Declares a computed property reversedMessage. The provided function will be used as a getter for the property vm.reversedMessage. vm.reversedMessage depends on vm.message. When vm.message changes, vm.reversedMessage will also be updated.

<p id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p></p><script>var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Runoob!&#39;
  },
  computed: {    //计算属性的getter
    reversedMessage: function () {
      // `this指向vm实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})</script>

• #methods Methods
  -The effect is the same, but computed is based on its dependency cache, only when the relevant dependencies change Will be revalued. With methods, the function will always be called and executed again when re-rendering.

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• Computed properties only have getters by default, but you can also provide a setter when needed: used to update the original properties

The above is the detailed content of Introduction to computed properties in vue.js. For more information, please follow other related articles on the PHP Chinese website!