vue基礎(chǔ)語法之插值表達式詳解
一、vscode插件介紹
在我們演示插值表達式之前,我們先安裝這一個VScode給我們提供的插件,它可以將我們書寫好的網(wǎng)頁通過服務(wù)端口的方式進行訪問,同時它的好處還有:再修改代碼后,不需要我們手動點擊刷新,插件會幫我們自動進行刷新,是不是非常方便,提高了我們的開發(fā)效率,節(jié)省了我們每次修改代碼都要點擊一次刷新的操作。
安裝步驟如下圖所示:安裝Live Server插件
我們安裝完插件以后,重啟VScode編輯器,然后可以再一個html頁面中,右鍵,選擇open with Live Server選項,進行打開。也可以使用快捷鍵:alt+L然后再按alt+o,即可通過我們安裝的插件的方式再瀏覽器中打開。
打開后我們可以再地址欄中看到127.0.0.1:5500的這個端口方式打開的瀏覽器。
二、插值表達式介紹
掛載元素可以使用 Vue.js 的模板語法,模板中可以通過插值表達式為元素進行動態(tài)內(nèi)容設(shè)置,寫法為 {{ }}。
三、插值表達式示例1
我們可以再掛載元素的內(nèi)部的插值表達式中,書寫算數(shù)運算,它會幫我們進行自動運算結(jié)果。
我們先來演示一下,沒有進行vue掛載元素,我們直接使用插值表達式,然后再瀏覽器中運行。
<body> <div id="app"> <ul> <li>計算結(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>計算結(jié)果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> </script> </body>
發(fā)現(xiàn)運行后的結(jié)果并沒有幫我們計算結(jié)果,而是將我們再標(biāo)簽元素中書寫的內(nèi)容直接當(dāng)普通文本的形式給我們展示出來的。
四、插值表達式示例2
vue掛載元素后,我們再使用插值表達式,然后再瀏覽器中運行。
<body> <div id="app"> <ul> <li>計算結(jié)果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el:'#app' }) </script> </body>
通過運行我們發(fā)現(xiàn),我們的計算結(jié)果顯示出來啦!這就說明數(shù)學(xué)計算功能是我們vue的插值表達式的功能,如果我們沒有進行指定掛載元素,那么就相當(dāng)于沒有使用vue的功能,我們顯示的效果就是普通文本的效果。
五、插值表達式注意點
插值表達式只能書寫在標(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 表達式,不能書寫語句。
<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>
六、插值表達式補充
插值表達式中不僅可以書寫數(shù)學(xué)運算,還可以書寫三元運算符。
<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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case(短橫線)命名法和使用大駝峰的區(qū)別,通過實例可以看出如果是在html中使用組件,那么就不能用大駝峰式寫法,如果是在.vue?文件中就可以,需要的朋友可以參考下2023-10-10nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
這篇文章主要介紹了nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11