Introduction to computed properties in vue.js-JS Tutorial-php.cn

Introduction to computed properties in vue.js

零到壹度

Release： 2018-04-13 17:24:33

Original

952 people have browsed it

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>

Copy after login

#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(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

Copy after login

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>

Copy after login

#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(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

Copy after login

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!