vue基礎(chǔ)語(yǔ)法之插值表達(dá)式詳解

更新時(shí)間：2022年01月27日 17:23:46 作者：澤哥ins

這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語(yǔ)法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

一、vscode插件介紹

在我們演示插值表達(dá)式之前，我們先安裝這一個(gè)VScode給我們提供的插件，它可以將我們書寫好的網(wǎng)頁(yè)通過(guò)服務(wù)端口的方式進(jìn)行訪問(wèn)，同時(shí)它的好處還有：再修改代碼后，不需要我們手動(dòng)點(diǎn)擊刷新，插件會(huì)幫我們自動(dòng)進(jìn)行刷新，是不是非常方便，提高了我們的開發(fā)效率，節(jié)省了我們每次修改代碼都要點(diǎn)擊一次刷新的操作。

安裝步驟如下圖所示：安裝Live Server插件

我們安裝完插件以后，重啟VScode編輯器，然后可以再一個(gè)html頁(yè)面中，右鍵，選擇open with Live Server選項(xiàng)，進(jìn)行打開。也可以使用快捷鍵：alt+L然后再按alt+o，即可通過(guò)我們安裝的插件的方式再瀏覽器中打開。

打開后我們可以再地址欄中看到127.0.0.1:5500的這個(gè)端口方式打開的瀏覽器。

二、插值表達(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)演示一下，沒有進(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é)果，而是將我們?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á)式的功能，如果我們沒有進(jìn)行指定掛載元素，那么就相當(dāng)于沒有使用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>