溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
vue基礎(chǔ)語法中的插值表達(dá)式如何理解，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
在我們演示插值表達(dá)式之前，我們先安裝這一個(gè)VScode給我們提供的插件，它可以將我們書寫好的網(wǎng)頁通過服務(wù)端口的方式進(jìn)行訪問，同時(shí)它的好處還有：再修改代碼后，不需要我們手動(dòng)點(diǎn)擊刷新，插件會(huì)幫我們自動(dòng)進(jìn)行刷新，是不是非常方便，提高了我們的開發(fā)效率，節(jié)省了我們每次修改代碼都要點(diǎn)擊一次刷新的操作。
安裝步驟如下圖所示：安裝Live Server插件
我們安裝完插件以后，重啟VScode編輯器，然后可以再一個(gè)html頁面中，右鍵，選擇open with Live Server選項(xiàng)，進(jìn)行打開。也可以使用快捷鍵：alt+L然后再按alt+o，即可通過我們安裝的插件的方式再瀏覽器中打開。
打開后我們可以再地址欄中看到127.0.0.1:5500的這個(gè)端口方式打開的瀏覽器。
掛載元素可以使用 Vue.js 的模板語法，模板中可以通過插值表達(dá)式為元素進(jìn)行動(dòng)態(tài)內(nèi)容設(shè)置，寫法為 {{ }}。
我們可以再掛載元素的內(nèi)部的插值表達(dá)式中，書寫算數(shù)運(yùn)算，它會(huì)幫我們進(jìn)行自動(dòng)運(yùn)算結(jié)果。
我們先來演示一下，沒有進(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é)果并沒有幫我們計(jì)算結(jié)果，而是將我們再標(biāo)簽元素中書寫的內(nèi)容直接當(dāng)普通文本的形式給我們展示出來的。
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>
new Vue({
el:'#app'
})
</script>
</body>通過運(yùn)行我們發(fā)現(xiàn)，我們的計(jì)算結(jié)果顯示出來啦！這就說明數(shù)學(xué)計(jì)算功能是我們vue的插值表達(dá)式的功能，如果我們沒有進(jìn)行指定掛載元素，那么就相當(dāng)于沒有使用vue的功能，我們顯示的效果就是普通文本的效果。
插值表達(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á)式，不能書寫語句。
<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á)式中不僅可以書寫數(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>
看完上述內(nèi)容，你們掌握vue基礎(chǔ)語法中的插值表達(dá)式如何理解的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼