vue基礎(chǔ)語(yǔ)法之插值表達(dá)式詳解
一、vscode插件介紹
在我們演示插值表達(dá)式之前,我們先安裝這一個(gè)VScode給我們提供的插件,它可以將我們書寫好的網(wǎng)頁(yè)通過(guò)服務(wù)端口的方式進(jìn)行訪問(wèn),同時(shí)它的好處還有:再修改代碼后,不需要我們手動(dòng)點(diǎn)擊刷新,插件會(huì)幫我們自動(dòng)進(jìn)行刷新,是不是非常方便,提高了我們的開(kāi)發(fā)效率,節(jié)省了我們每次修改代碼都要點(diǎn)擊一次刷新的操作。
安裝步驟如下圖所示:安裝Live Server插件
我們安裝完插件以后,重啟VScode編輯器,然后可以再一個(gè)html頁(yè)面中,右鍵,選擇open with Live Server選項(xiàng),進(jìn)行打開(kāi)。也可以使用快捷鍵:alt+L然后再按alt+o,即可通過(guò)我們安裝的插件的方式再瀏覽器中打開(kāi)。
打開(kāi)后我們可以再地址欄中看到127.0.0.1:5500的這個(gè)端口方式打開(kāi)的瀏覽器。
二、插值表達(dá)式介紹
掛載元素可以使用 Vue.js 的模板語(yǔ)法,模板中可以通過(guò)插值表達(dá)式為元素進(jìn)行動(dòng)態(tài)內(nèi)容設(shè)置,寫法為 {{ }}。
三、插值表達(dá)式示例1
我們可以再掛載元素的內(nèi)部的插值表達(dá)式中,書寫算數(shù)運(yùn)算,它會(huì)幫我們進(jìn)行自動(dòng)運(yùn)算結(jié)果。
我們先來(lái)演示一下,沒(méi)有進(jìn)行vue掛載元素,我們直接使用插值表達(dá)式,然后再瀏覽器中運(yùn)行。
<body> <div id="app"> <ul> <li>計(jì)算結(jié)果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> </script></body><body> <div id="app"> <ul> <li>計(jì)算結(jié)果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> </script> </body>
發(fā)現(xiàn)運(yùn)行后的結(jié)果并沒(méi)有幫我們計(jì)算結(jié)果,而是將我們?cè)贅?biāo)簽元素中書寫的內(nèi)容直接當(dāng)普通文本的形式給我們展示出來(lái)的。
四、插值表達(dá)式示例2
vue掛載元素后,我們?cè)偈褂貌逯当磉_(dá)式,然后再瀏覽器中運(yùn)行。
<body> <div id="app"> <ul> <li>計(jì)算結(jié)果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script> </body>
通過(guò)運(yùn)行我們發(fā)現(xiàn),我們的計(jì)算結(jié)果顯示出來(lái)啦!這就說(shuō)明數(shù)學(xué)計(jì)算功能是我們vue的插值表達(dá)式的功能,如果我們沒(méi)有進(jìn)行指定掛載元素,那么就相當(dāng)于沒(méi)有使用vue的功能,我們顯示的效果就是普通文本的效果。
五、插值表達(dá)式注意點(diǎn)
插值表達(dá)式只能書寫在標(biāo)簽內(nèi)容區(qū)域,可以與其它內(nèi)容混合。
<body> <div id="app"> <ul> <li id="{{ 1 + 2 + 3 }}"></li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script> </body>
內(nèi)部只能書寫 JavaScript 表達(dá)式,不能書寫語(yǔ)句。
<body> <div id="app"> <ul> <li>{{ var i = 0}}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script></body><body> <div id="app"> <ul> <li>{{ var i = 0}}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script> </body>
六、插值表達(dá)式補(bǔ)充
插值表達(dá)式中不僅可以書寫數(shù)學(xué)運(yùn)算,還可以書寫三元運(yùn)算符。
<body> <div id="app"> <ul> <li>{{ 10>20?'10大于20':'10不大于20' }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script> </body>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case(短橫線)命名法和使用大駝峰的區(qū)別,通過(guò)實(shí)例可以看出如果是在html中使用組件,那么就不能用大駝峰式寫法,如果是在.vue?文件中就可以,需要的朋友可以參考下2023-10-10vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例
這篇文章主要介紹了vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue中$nextTick實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue中$nextTick實(shí)現(xiàn)源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11詳解lottie動(dòng)畫在vue中的應(yīng)用
Lottie 是一個(gè)適用于 Android、iOS、Web 和 Windows 的庫(kù),它使用 Bodymovin 解析導(dǎo)出為 JSON 的 Adobe After Effects 動(dòng)畫,下面我們就來(lái)看看它在vue中的是如何應(yīng)用的吧2023-12-12Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法舉例
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法的相關(guān)資料,科學(xué)計(jì)數(shù)法是科學(xué)家用來(lái)表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-02-02