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-10
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了 Vue.js對(duì)象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例
這篇文章主要介紹了vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue中$nextTick實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue中$nextTick實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue如何添加jest測(cè)試問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要給大家介紹了vue懶加載和子組件懶加載有什么區(qū)別,Vue懶加載指的是對(duì)圖片等資源的延遲加載,而子組件懶加載則是指延遲加載組件實(shí)例,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2023-12-12
詳解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-12
Vue科學(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