vue.js の計算プロパティの概要

この記事の内容は vue.js の計算プロパティの紹介です。必要な友人はそれを参照できます

• 計算プロパティ reversedMessage を宣言します。 。提供された関数は、プロパティ vm.reversedMessage のゲッターとして使用されます。 vm.reversedMessage は vm.message に依存します。vm.message が変更されると、vm.reversedMessage も更新されます。
  

<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: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• 計算プロパティには、デフォルトではゲッターのみがありますが、必要に応じてセッターを提供することもできます。元のプロパティの更新に使用されます

• 計算メソッド

  は、計算プロパティ reversedMessage を宣言します。提供された関数は、プロパティ vm.reversedMessage のゲッターとして使用されます。 vm.reversedMessage は vm.message に依存します。vm.message が変更されると、vm.reversedMessage も更新されます。
  

<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: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

• 計算されたプロパティにはデフォルトでゲッターのみがありますが、必要に応じてセッターを提供することもできます: 元のプロパティを更新するために使用されます

以上がvue.js の計算プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。