您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“vue中如何實現(xiàn)計算屬性”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“vue中如何實現(xiàn)計算屬性”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
什么是計算屬性
模板內(nèi)的表達式非常便利,但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
這里的表達式包含3個操作,并不是很清晰,所以遇到復(fù)雜邏輯時應(yīng)該使用Vue特帶的計算屬性computed來進行處理。
計算屬性(computed)用于處理復(fù)雜邏輯
computed:{ }
computed做為vue的選項是固定的
例子:
<div id="itany"> <p>{{mes}}</p> <p>{{count}}</p> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#itany', data:{ mes:'hello vue' }, computed:{ count:function(){ //切割 翻轉(zhuǎn) 拼接 return this.mes.split(' ').reverse().join('---') } } }) </script>
輸出結(jié)果為:
hello vue
vue---hello
練習(xí)
要求:點擊button按鈕使數(shù)字以對應(yīng)的價格改變
Image 2.png
代碼如下:
<div id="itany"> <button v-on:click="num">總和</button> <p>{{arr}}</p> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#itany', data:{ name:{price:2,count:0}, names:{price:4,count:0}, see:true }, methods:{ num:function(){ this.name.count++, this.names.count++ } }, computed:{ arr:function(){ return this.name.price*this.name.count+this.names.price*this.names.count } } }) </script>
讀到這里,這篇“vue中如何實現(xiàn)計算屬性”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。