本文小編為大家詳細介紹“vue中如何實現(xiàn)計算屬性”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“vue中如何實現(xiàn)計算屬性”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、徐水網(wǎng)站維護等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
什么是計算屬性
模板內(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
練習
要求:點擊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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱:vue中如何實現(xiàn)計算屬性
本文地址:http://muchs.cn/article6/ihgcog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站營銷、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站收錄、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)