vue.js如何實現條件渲染

這篇文章主要介紹了vue.js如何實現條件渲染，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

一、初探條件渲染

vue 的條件渲染，仍舊依賴于指令系統，下面逐個介紹：

（1）v-if

<div id="app">
  <div v-if="c1">c1</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

當 c1 為真值的時候，渲染出 v-if 所綁定的元素，否則不渲染出該元素。渲染結果如下：

<div id="app"></div>

（2）v-else

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else>c1 is not true</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

當 c1 為真值的時候，渲染 v-if 所綁定的元素，否則渲染 v-else 所綁定的元素。這里值得注意的是，在 Handlebars 模板引擎里面，else 可以和 each 所搭配，當遍歷次數為0的時候，則渲染 else 塊所對應的內容；而對于 vue，官方給出的說法是，每個 v-else 所綁定語句必須綁定在 v-if 或者 v-else-if 語句的后面。一開始我還抱有一絲希望地去試了一下，結果。。。

遍歷次數為0的時候，v-else 綁定的元素沒有渲染出來，而且控制臺還報錯了。

個人感覺，在這一方面，vue 的模板引擎可能有所欠缺。雖然說，我們可以利用在循環中添加條件判斷實現相同的功能，但卻需要添加額外的代碼。

（3）v-else-if

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else-if="c2">c2</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false,
    c2: true
  }
});

這里先檢查 c1 是否為真值，是則渲染出 v-if 綁定的元素，否則檢查 c2 是否為真值，是則渲染出 v-else-if 所綁定的元素。如果 c1 / c2 都不為真值，則都不渲染。渲染結果如下：

<div id="app">
  <div>c2</div>
</div>

不難理解，v-if、 v-else、 v-else-if 跟類 C 語言中的 if、else、else if 功能相仿。

二、條件渲染優化

除了提供跟類 C 語言中的 if、else、else if 相似的功能以外，vue 還為開發者提供了性能優化方案。

（1）v-show

v-show 有著和 v-if 相似而又不同的功能，v-if 依賴于控制 DOM 節點，而 v-show 是依賴于控制 DOM 節點的 display 屬性。

<div id="app">
  <div v-show="c4">c4</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c4: false
  }
});

當 v-show 綁定的值為真值的時候，節點正常渲染；當為假值的時候，節點仍舊渲染，但是添加了 ，將節點通過 CSS 的方式隱藏。渲染結果如下：

<div id="app">
  <div >c4</div>
</div>

相比于 v-if，v-show 其實不管在什么條件下，一開始都會進行節點的渲染，而后續的狀態切換都是基于 CSS 實現的。針對狀態需要頻繁切換狀態的節點，v-show 相對于直接修改 DOM 節點的 v-if 有更好的性能。

然而，v-show 的缺點也是顯而易見的，不管初始條件如何，它都將進行 DOM 節點的渲染，這對首屏加載優化不一定是個好事情。

（2）key

在使用 v-if 等指令的時候，vue 會盡可能地復用已經渲染的元素，而不是全部地重頭渲染。例如一對綁定 v-if 與 v-else 的元素，如果二者內部 DOM 元素相同，則可能在所綁定數據改變時，只更新綁定了的屬性，其它通過用戶操作或者 JS 修改了的屬性將被保留。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

這里就是如此，點擊 toggle 按鈕的時候，v-if 所綁定的值會切換，相應的，DOM 節點也會跟著切換，但是實際上，由于 vue 重用了 input 元素，切換的同時，用戶填寫的內容并沒有被清空。同理，label 元素在切換的工程中，其實也只是修改了 for 屬性和元素內的文字，并沒有銷毀原有 DOM 節點和生成新的 DOM節點。

但是 vue 做的這種優化并不總是為人們所需要的，不需要它的時候，我們為這個元素添加一個唯一的 key 值就可以了。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" key="name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" key="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

像這樣，為這兩個不需要“優化”的 input 元素添加了唯一標識的 key 以后，vue 便不會再復用這兩個元素。每次切換之后，修改的內容將不會被保留。

三、更多思考

（1）基于標簽的指令（v-bind 、v-if）

Handlebars 的 helpers 有自己獨立的語法，比如：

{{#if ok}}
 <h2>Yes</h2>
{{/if}}

它定義了一組自己的語法。而實現同樣的功能，vue 使用類似于 v-bind、v-if 之類的指令，它們都是綁定在一個個標簽上面的，如

<h2 v-if="ok">Yes</h2>

這樣的語法更加簡潔、清晰。

Handlebars 的語法，支持同時綁定多個 DOM 節點。

{{#if ok}}
 <h2>Yes</h2>
 <h2>Yes</h2>
 <h2>Yes</h2>
{{/if}}

按照前面的思路，難道 vue 要實現成這樣？

<h2 v-if="ok">Yes</h2>
<h2 v-if="ok">Yes</h2>
<h2 v-if="ok">Yes</h2>

那根本不可能，添加額外的 DOM 節點包裹住它們？那就更不可能。vue 擴展了一個 template 節點，使用的時候，我們可以像 HTML 節點一樣去使用它，但是渲染頁面的時候，它不會被渲染在頁面上。于是，前面的代碼可以實現成這樣：

<template v-if="ok">
 <h2>Yes</h2>
 <h2>Yes</h2>
 <h2>Yes</h2>
</template>

想想，其實和 Handlebars 也差不多了，甚至顯得還要復雜些了，畢竟 template 這個單詞這么長~

（2）利用條件渲染字符串

前面說，v-if 等指令都是基于標簽的，那如果我不想創建額外的標簽，只是想按照條件去修改一個字符串呢？沒錯，你猜對了，template 節點，它里面除了可以存放節點，也可以直接存放字符串，就像這樣：

<div id="app">
  <template v-if="c3">text</template>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c3: true
  }
});

渲染結果：

<div id="app">text</div>

這里其實也就是利用了 template 節點不會被渲染在頁面上的特性。

（3）屬性的“條件渲染”

既然 HTML 節點可以條件渲染，多個 HTML 節點可以條件渲染，HTML 節點內字符串可以條件渲染，那么 HTML 屬性呢？在編寫模板的時候，HTML 屬性其實也是字符串，我們能想上面那樣，利用 template 模板創建字符串作為 HTML 的屬性嗎？

復制代碼 代碼如下:

<div title="<template v-if='c3'>title content</template>">此處應有 title</div>

是不是一看就感覺怪怪的？vue 也這樣覺得，于是控制臺里就解析成了：

復制代碼 代碼如下:

<div title="<template v-if='c3'>title content</template>">此處應有 title</div>

中間的 <template v-if='c3'>title content</template> 整個的被識別成了字符串，那如果去掉外面的雙引號呢？

復制代碼 代碼如下:

<div title=<template v-if='c3'>title content</template>>此處應有 title</div>

好像看起來更奇怪了。最后的渲染結果：

<div title="<template">title content&gt;此處應有 title</div>

vue 的模板解析不是簡單的依賴于字符串的解析，所以其實這里不能使用這種方法。正確的姿勢是利用 v-bind 指令：

<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因為 v-bind 指令的預期值實際上可以接受 js 表達式的，這里我們傳入了一個條件表達式。當 c3 為真值的時候，渲染為 title="title content"，當 c3 為假值的時候，渲染為 title=""。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue.js如何實現條件渲染”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!