0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

Vue入門(mén)之計(jì)算屬性和監(jiān)聽(tīng)器

jf_78858299 ? 來(lái)源:CSDN ? 作者:一只楠喃 ? 2023-02-06 16:11 ? 次閱讀

六.計(jì)算屬性和監(jiān)聽(tīng)器
6.1計(jì)算屬性 computed
6.1.1存在問(wèn)題
插值表達(dá)式, 可以完成表達(dá)式的計(jì)算,如果邏輯復(fù)雜時(shí),將很難維護(hù). 例如:


{{ message.split('').reverse().join('') }}


6.1.2基本使用
Vue計(jì)算屬性computed就是用來(lái)處理復(fù)雜邏輯的. 當(dāng)data區(qū)域的數(shù)據(jù)變更是,將進(jìn)行自動(dòng)計(jì)算.

案例:字符串倒排











{{showMessage}}




6.1.3computed和methods區(qū)別

  • 計(jì)算屬性,用于實(shí)時(shí)計(jì)算,只要數(shù)據(jù)發(fā)生了更改才計(jì)算。緩存計(jì)算結(jié)果。
  • 方法,每次調(diào)用都執(zhí)行












計(jì)算屬性


{{showCount}}
{{showCount}}

普通方法


{{showCount2()}}
{{showCount2()}}





6.1.4案例:購(gòu)物車

在這里插入圖片描述































編號(hào) 標(biāo)題 單價(jià) 購(gòu)買(mǎi)數(shù)量 小計(jì)
{{index+1}} {{book.title}} {{book.price}}
-
{{book.count}}
+
{{book.price * book.count}}
總價(jià):{{totalPrice}}





6.1.5高級(jí)使用

  • 計(jì)算屬性提供了setter方法對(duì)屬性進(jìn)行修改

}
},
})

案例:拆分姓名 (第一版)

在這里插入圖片描述











請(qǐng)輸入姓名:

姓:{{firstname}}

名:{{secondname}}





6.2監(jiān)聽(tīng)器 watch

6.2.1什么是監(jiān)聽(tīng)器

監(jiān)聽(tīng)數(shù)據(jù)的變化

})

6.2.2基本語(yǔ)法

  • 案例:拆分姓名 (第二版)











請(qǐng)輸入姓名:

姓:{{firstname}}

名:{{secondname}}




6.2.3高級(jí)使用:監(jiān)聽(tīng)對(duì)象屬性

  • 案例:拆分姓名 (第三版)











請(qǐng)輸入姓名:

姓:{{firstname}}

名:{{secondname}}





聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 計(jì)算
    +關(guān)注

    關(guān)注

    2

    文章

    440

    瀏覽量

    38680
  • 編程
    +關(guān)注

    關(guān)注

    88

    文章

    3545

    瀏覽量

    93501
  • vue
    vue
    +關(guān)注

    關(guān)注

    0

    文章

    57

    瀏覽量

    7781
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    電話遙控監(jiān)聽(tīng)器電路

    ;反相兩個(gè)輸出端,可以直接連接有關(guān)電器控制端)。5. 具有第二功能設(shè)置,增加了遙控監(jiān)聽(tīng)器功能。6. 遠(yuǎn)程操作均有狀態(tài)提示音。7. 所有設(shè)置
    發(fā)表于 07-14 15:13

    用音樂(lè)將智能設(shè)備變成監(jiān)聽(tīng)器 黑客是怎么做到的?

      導(dǎo)讀:據(jù)外媒報(bào)道,一群學(xué)生黑客演示了如何用音樂(lè)將智能設(shè)備變成監(jiān)聽(tīng)器。這種技術(shù)將人耳聽(tīng)不到的聲吶信號(hào)植入到智能手機(jī)或電視機(jī)播放的歌曲中,然后利用這些設(shè)備的麥克風(fēng)或音箱來(lái)監(jiān)聽(tīng)聲吶信號(hào)的反射方式,從而
    發(fā)表于 08-22 09:17

    基于linux操作系統(tǒng)的oracle數(shù)據(jù)庫(kù)配置監(jiān)聽(tīng)

    1. 修改監(jiān)聽(tīng)器配置文件Linux下Oracle監(jiān)聽(tīng)器配置文件在:$ ORACLE_HOME/network/admin/listerer.ora, 如:/bank/oracle/oracle10g
    發(fā)表于 07-08 07:17

    請(qǐng)問(wèn)vue$route監(jiān)聽(tīng)()怎么引用?

    vue$route監(jiān)聽(tīng)()怎么引用
    發(fā)表于 11-10 06:33

    用于卷煙機(jī)組的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器的設(shè)計(jì)與實(shí)現(xiàn)The re

    本文闡述了如何利用PCI-9810( 非智能單路CAN 卡)作為硬件接口,用DEPHI軟件開(kāi)發(fā)平臺(tái)開(kāi)發(fā)出友好的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器來(lái)實(shí)現(xiàn)對(duì)CAN-BUS 線路數(shù)據(jù)的實(shí)時(shí)的, 準(zhǔn)確的監(jiān)聽(tīng)以及根據(jù)工
    發(fā)表于 05-26 15:28 ?26次下載

    用于卷煙機(jī)組的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器的設(shè)計(jì)與實(shí)現(xiàn)The re

    本文闡述了如何利用PCI-9810( 非智能單路CAN 卡)作為硬件接口,用DEPHI軟件開(kāi)發(fā)平臺(tái)開(kāi)發(fā)出友好的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器來(lái)實(shí)現(xiàn)對(duì)CAN-BUS 線路數(shù)據(jù)的實(shí)時(shí)的,準(zhǔn)確的監(jiān)聽(tīng)以及根據(jù)工
    發(fā)表于 05-26 15:36 ?1次下載

    用于卷煙機(jī)組的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器的設(shè)計(jì)與實(shí)現(xiàn)The re

    本文闡述了如何利用PCI-9810( 非智能單路CAN 卡)作為硬件接口,用DEPHI軟件開(kāi)發(fā)平臺(tái)開(kāi)發(fā)出友好的CAN 總線實(shí)時(shí)監(jiān)聽(tīng)器來(lái)實(shí)現(xiàn)對(duì)CAN-BUS 線路數(shù)據(jù)的實(shí)時(shí)的,準(zhǔn)確的監(jiān)聽(tīng)以及根據(jù)工
    發(fā)表于 05-26 16:27 ?17次下載

    不用電池的半導(dǎo)體電碼監(jiān)聽(tīng)器

    不用電池的半導(dǎo)體電碼監(jiān)聽(tīng)器
    發(fā)表于 04-30 23:29 ?1219次閱讀
    不用電池的半導(dǎo)體電碼<b class='flag-5'>監(jiān)聽(tīng)器</b>

    JAVA教程之計(jì)算器

    JAVA教程之計(jì)算器,很好的JAVA的資料,快來(lái)學(xué)習(xí)吧
    發(fā)表于 04-11 17:14 ?14次下載

    嬰兒監(jiān)聽(tīng)器的制作與接線

    這里介紹的家用嬰兒監(jiān)聽(tīng)器外形圖如圖1所示,它由一臺(tái)自制的無(wú)線電調(diào)頻發(fā)射機(jī)和一臺(tái)便攜式調(diào)頻收音機(jī)(或帶有調(diào)頻波段的普通便攜式收音機(jī))組成。發(fā)射機(jī)放在嬰兒房間,收音機(jī)由大人隨身攜帶或放在大人干活的房間, 嬰兒有任何動(dòng)靜都可通過(guò)收音機(jī)監(jiān)聽(tīng)到,這樣大人可以放心地做自己想要做的事,
    的頭像 發(fā)表于 11-21 16:31 ?6744次閱讀

    LabVIEW入門(mén)教程之計(jì)算機(jī)虛擬儀器圖形編程的LabVIEW實(shí)驗(yàn)教材免費(fèi)下載

    本文檔的主要內(nèi)容詳細(xì)介紹的是LabVIEW入門(mén)教程之計(jì)算機(jī)虛擬儀器圖形編程的LabVIEW實(shí)驗(yàn)教材免費(fèi)下載。
    發(fā)表于 12-02 08:00 ?4次下載
    LabVIEW<b class='flag-5'>入門(mén)教程之計(jì)算</b>機(jī)虛擬儀器圖形編程的LabVIEW實(shí)驗(yàn)教材免費(fèi)下載

    聲控傳感構(gòu)成的防盜監(jiān)聽(tīng)電路

    下圖是由聲控傳感構(gòu)成的防盜監(jiān)聽(tīng)電路。與調(diào)頻收音機(jī)配合使用可作為家庭、倉(cāng)庫(kù)、車庫(kù)等的監(jiān)聽(tīng)器。
    的頭像 發(fā)表于 09-18 09:46 ?3195次閱讀
    聲控傳感<b class='flag-5'>器</b>構(gòu)成的防盜<b class='flag-5'>監(jiān)聽(tīng)</b>電路

    Vue入門(mén)Vue的生命周期

    .生命周期 4.1生命周期是什么 Vue的生命周期, 就是Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程.
    的頭像 發(fā)表于 02-06 16:16 ?821次閱讀
    <b class='flag-5'>Vue</b><b class='flag-5'>入門(mén)</b><b class='flag-5'>Vue</b>的生命周期

    Vue入門(mén)Vue定義

    Vue (讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。 Vue 的核心庫(kù)只關(guān)注視圖層,也就是只處理頁(yè)面。 Vue提供的一套JS框架,通常稱為
    的頭像 發(fā)表于 02-06 16:41 ?1029次閱讀
    <b class='flag-5'>Vue</b><b class='flag-5'>入門(mén)</b>之<b class='flag-5'>Vue</b>定義

    一文看懂Vue3響應(yīng)式系統(tǒng)原理

    Vue3 中,響應(yīng)式系統(tǒng)的實(shí)現(xiàn)基于 ES6 的 Proxy 對(duì)象。Proxy 可以直接監(jiān)聽(tīng)對(duì)象和數(shù)組的變化,而無(wú)需對(duì)每個(gè)屬性進(jìn)行監(jiān)聽(tīng),從而大大提高性能。同時(shí),Proxy 也可以解決
    的頭像 發(fā)表于 12-07 10:55 ?1535次閱讀
    一文看懂<b class='flag-5'>Vue</b>3響應(yīng)式系統(tǒng)原理