您好,登錄后才能下訂單哦!
vue中怎么實現(xiàn)計算屬性,針對這個問題,這篇文章詳細介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
什么是計算屬性
模板內(nèi)的表達式非常便利,但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
這里的表達式包含3個操作,并不是很清晰,所以遇到復雜邏輯時應(yīng)該使用Vue特帶的計算屬性computed來進行處理。
計算屬性(computed)用于處理復雜邏輯
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
練習
要求:點擊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>
關(guān)于vue中怎么實現(xiàn)計算屬性問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責聲明:本站發(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)容。