快捷導航

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

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

這篇文章主要為大家詳細介紹了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é)果，而是將我們再標簽元素中書寫的內(nèi)容直接當普通文本的形式給我們展示出來的。

四、插值表達式示例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ù)學計算功能是我們vue的插值表達式的功能，如果我們沒有進行指定掛載元素，那么就相當于沒有使用vue的功能，我們顯示的效果就是普通文本的效果。

五、插值表達式注意點

插值表達式只能書寫在標簽內(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ù)學運算，還可以書寫三元運算符。

<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>