vue基礎語法之插值表示式詳解
目錄
- 一、vscode外掛介紹
- 二、插值表示式介紹
- 三、插值表示式示例1
- 四、插值表示式示例2
- 五、插值表示式注意點
- 六、插值表示式補充
- 總結
一、vscode外掛介紹
在我們演示插值表示式之前，我們先安裝這一個VScode給我們提供的外掛，它可以將我們書寫好的通過服務埠的方式進行訪問，同時它的好處還有：再修改程式碼後，不需要我們手動點選重新整理，外掛會幫我們自動進行重新整理，是不是非常方便，提高了我們的開發效率，節省了我們每次修改程式碼都要點選一次重新整理的操作。
安裝步驟如下圖所示：安裝Live Server外掛
我們安裝完外掛以後，重啟VScode編輯器，然後可以再一個html頁面中，右鍵，選擇open with Live Server選項，進行開啟。也可以使用快捷鍵：alt+L然後再按alt+o，即可通過我們安裝的外掛的方式再瀏覽器中開啟。
開啟後我們可以再位址列中看到127.0.0.1:5500的這個埠方式開啟的瀏覽器。
二、插值表示式介紹
掛載元素可以使用 . 的模板語法，模板中可以通過插值表示式為元素進行動態內容設定，寫法為 {{ }}。
三、插值表示式示例1
我們可以再掛載元素的內部的插值表示式中，書寫算數運算，它會幫我們進行自動運算結果。
我們先來演示一下，沒有進行vue掛載元素，我們直接使用插值表示式，然後再瀏覽器中執行。
<body> <div id="app"> <ul> <li>計算結果為: {{ 1 + 2 + 3 }}</li> </ul> </div> <script src="js/vue-2.6.14.js"></
發現執行後的結果並沒有幫我們計算結果，而是將我們再標籤元素中書寫的內容直接當普通文字的形式給我們展示出來的。
四、插值表示式示例2
vue掛載元素後，我們再使用插值表示式，然後再瀏覽器中執行。
<body>
<div id="app">
<ul>
<li>計算結果為: {{ 1 + 2 + 3 }}</li>
</ul>
</div>
<script src="js/vue-2.6.14.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
</body>
通過執行我們發現，我們的計算結果顯示出來啦！這就說明數學計算功能是我們vue的插值表示式的功能，如果我們沒有進行指定掛載元素，那麼就相當於沒有使用vue的功能，我們顯示的效果就是普通文字的效果。
五、插值表示式注意點
插值表示式只能書寫在標籤內容區域，可以與其它內容混合。
<body>
<div id="app">
<ul>
<li i客棧d="{{ 1 + 2 + 3 }}"></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><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>{{ 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>
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!