計算屬性關鍵詞: computed
demo1:
<div id="app"> <p>原始字串: {{ message }}</p> <p>計算后反轉字串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Ambbq!' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實體 return this.message.split('').reverse().join('') } } }) </script>
computed vs methods
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴快取，只有相關依賴發生改變時才會重新取值，而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行，
demo2:
<div id="app"> <p>原始字串: {{ message }}</p> <p>計算后反轉字串: {{ reversedMessage }}</p> <p>使用方法后反轉字串: {{ reversedMessage2() }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Ambbq!' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實體 return this.message.split('').reverse().join('') } }, methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } } }) </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151750.html
標籤：JavaScript