今回は、vue を使用して プロパティ とメソッド リスナーを計算する方法と、 vue を使用してプロパティ とメソッド リスナーを計算するときの
注意事項 を説明します。以下は実際的なケースです。テンプレート内の計算プロパティ
は非常に便利ですが、単純な操作用に設計されています。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:<p id="example"> {{ message.split('').reverse().join('') }} </p>
<p id="app"> {{fullName}} </p> var vm = new Vue({ el: '#app', data: { firstName: "王", lastName: "小智", age: 28 }, // 计算属性 computed: { fullName: function () { console.log("计算了一次") return this.firstName + " " + this.lastName } } })
Wang Xiaozhi次に、ブラウザを通じて age 属性の値を変更し、ページを再レンダリングします:
計算されたプロパティのキャッシュとメソッド
式の中でメソッドを呼び出すことで同じ効果を達成できることに気づいたかもしれません:<p>Reversed message: "{{ fullName() }}"</p> // 在组件中 methods: { fullName: function () { console.log("计算了一次") return this.firstName + " " + this.lastName; } }
Wang Xiaozhi上記も参照して、以下を参照してください。プロセッサは age 属性の値を変更し、ページの再レンダリングを許可します。
計算プロパティとリスニング プロパティ
リスニング プロパティでも同じ効果を達成できることに気づいたかもしれません:var vm = new Vue({ el: '#app', data: { firstName: "王", lastName: "小智", age: 28, fullName }, // 计算属性 watch: { firstName: function () { console.log("计算了一次"); this.fullNmae = this.firstName + this.lastName; }, lastName: function () { console.log("计算了一次") this.fullNmae = this.firstName + this.lastName; } } })
Wang Xiaozhiまた、上記を参照して、次のように変更します。ブラウザー age 属性の値により、ページを再レンダリングできます。
を以前に使用したことがある場合、ウォッチを悪用するのは簡単です。ただし、多くの場合、命令型の監視コールバックではなく、計算されたプロパティを使用する方が適切です。 この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: 🎜
他のデータの変更に合わせて変更する必要があるデータがある場合、特にAngularJS
以上がVue の計算プロパティとメソッド リスナーの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。