vue 計(jì)算屬性和偵聽(tīng)器的使用小結(jié)
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},computed: {reversedMessage: function () {return this.message.split(’’).reverse().join(’’)}/*// 相當(dāng)于reversedMessage: {get(){return this.message.split(’’).reverse().join(’’)}}*/} }); </script> </body></html>
解釋?zhuān)何覀冊(cè)趯傩詂omputed中定義了計(jì)算屬性reversedMessage，這里提供的函數(shù)將作為計(jì)算屬性reversedMessage的getter函數(shù)。
1.2 setter計(jì)算屬性默認(rèn)只有g(shù)etter，不過(guò)我們可以提供一個(gè)setter。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p><input type='text' v-model='reversedMessage' /> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},computed: {reversedMessage: {get(){return this.message.split(’’).reverse().join(’’)},set(value){this.message = value.split(’’).reverse().join(’’)}}} }); </script> </body></html>1.3 緩存
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><p>{{ reversedMessage }}</p><p>{{ reversedMessage1() }}</p> </div> <script> new Vue({el: ’#app’,data: {message: ’hello’},methods: {reversedMessage1: function(){return this.message.split(’’).reverse().join(’’)}},computed: {reversedMessage: function () {return this.message.split(’’).reverse().join(’’)}} }); </script> </body></html>
注意：雖然通過(guò)計(jì)算屬性和方法，都可以達(dá)到同樣的效果，但是計(jì)算屬性是基于它們的響應(yīng)式依賴(lài)進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴(lài)發(fā)生改變時(shí)它們才會(huì)重新求值。
1.4 偵聽(tīng)屬性通過(guò)Vue實(shí)例的watch屬性可以偵聽(tīng)數(shù)據(jù)的變化。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><button @click='reverse=!reverse'>反轉(zhuǎn)</button> </div> <script> new Vue({el: ’#app’,data: {message: ’Vue’,reverse: false},watch: {// message: function(newVal, oldVal){reverse: function(newVal){console.log(newVal)this.message = this.message.split(’’).reverse().join(’’)}}, }); </script> </body></html>
我們可以通過(guò)實(shí)例屬性vm.$watch達(dá)到同樣的效果。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <script src='https://cdn.staticfile.org/vue/2.4.2/vue.min.js'></script> </head> <body> <div id='app'><p>{{ message }}</p><button @click='reverse=!reverse'>反轉(zhuǎn)</button> </div> <script> var vm = new Vue({el: ’#app’,data: {message: ’Vue’,reverse: false} });// vm.$watch(’reverse’, function (newVal, oldVal) {vm.$watch(’reverse’, function (newVal) {console.log(newVal)this.message = this.message.split(’’).reverse().join(’’)}); </script> </body></html>
以上就是vue 計(jì)算屬性和偵聽(tīng)器的使用小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于vue 計(jì)算屬性和偵聽(tīng)器的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）3. PHP循環(huán)與分支知識(shí)點(diǎn)梳理4. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)5. ASP實(shí)現(xiàn)加法驗(yàn)證碼6. ASP基礎(chǔ)入門(mén)第二篇(ASP基礎(chǔ)知識(shí))7. PHP session反序列化漏洞超詳細(xì)講解8. ASP基礎(chǔ)知識(shí)Command對(duì)象講解9. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享10. Spring注入Date類(lèi)型的三種方法總結(jié)
網(wǎng)公網(wǎng)安備