本文小編為大家詳細(xì)介紹“vue中如何實(shí)現(xiàn)計(jì)算屬性”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue中如何實(shí)現(xiàn)計(jì)算屬性”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、徐水網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

什么是計(jì)算屬性

模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。例如：

<div id="example">
 {{ message.split('').reverse().join('') }}
</div>

這里的表達(dá)式包含3個(gè)操作，并不是很清晰，所以遇到復(fù)雜邏輯時(shí)應(yīng)該使用Vue特帶的計(jì)算屬性computed來(lái)進(jìn)行處理。

計(jì)算屬性（computed）用于處理復(fù)雜邏輯

computed：{
}

computed做為vue的選項(xiàng)是固定的

例子：

<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í)

要求：點(diǎn)擊button按鈕使數(shù)字以對(duì)應(yīng)的價(jià)格改變

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中如何實(shí)現(xiàn)計(jì)算屬性”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱(chēng)：vue中如何實(shí)現(xiàn)計(jì)算屬性
本文地址：http://chinadenli.net/article6/ihgcog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站營(yíng)銷(xiāo)、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站收錄、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)