本文主要和大家分享Vue.js條件渲染詳解，在字串模板中，例如Handlebars，我們得像這樣寫一個條件塊：
<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}}登入後複製
在Vue 中，我們使用v-if 指令實作相同的功能：
<h1 v-if="ok">Yes</h1>
登入後複製
也可以用v-else 新增一個「else 區塊」：
<h1 v-if="ok">Yes</h1>No
登入後複製
# 在<template> 元素上使用v-if 條件渲染分組
##因為
v-if 是一個指令，所以必須將它加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。
<p id="example">
<template v-if='ok'>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p>登入後複製
登入後複製
var vm = new Vue({
el: '#example', data: {
ok: true
}
})登入後複製
#v-else 和v-else-if
可以使用
v-else 指令來表示v-if 的「else 區塊」：
<p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don't
</p>登入後複製
<p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>登入後複製
登入後複製
v-else 元素必須緊跟著帶v-if 或v-else-if 的元素的後面，否則它將不會被識別。
類似於
v-else，v-else-if 也必須緊接在帶v-if 或v- else-if 的元素之後。
v-show
另一個用來根據條件顯示元素的選項是
v-show 指令。
<h1 v-show="ok">Hello!</h1>
登入後複製
不同的是帶有
v-show 的元素總是會被渲染並保留在 DOM 中。 v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，v-show 不支援 <template> 元素，也不支援 v-else。
v-if vs v-show
v-if 是「真正」的條件渲染，因為它會確保在切換過程中條件區塊內的事件監聽器和子元件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做－直到條件第一次變成真時，才會開始渲染條件塊。
相較之下，
v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，
v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
v-if
在字串模板中，例如Handlebars，我們得像這樣寫一個條件區塊：
<!-- Handlebars 模板 -->{{#if ok}}
<h1>Yes</h1>{{/if}}登入後複製
在Vue 中，我們使用
v -if 指令實作同樣的功能：
<h1 v-if="ok">Yes</h1>
登入後複製
也可以用
v-else 新增一個「else 區塊」：
<h1 v-if="ok">Yes</h1>No
登入後複製
# 在<template> 元素上使用v-if 條件渲染分組##因為
v-if
是指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p id="example">
<template v-if=&#39;ok&#39;>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template></p></pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">var vm = new Vue({
el: &#39;#example&#39;, data: {
ok: true
}
})</pre><div class="contentsignin">登入後複製</div></div>
#v-else 和v-else-if
v-else
指令來表示v-if 的「else 區塊」：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><p v-if="Math.random() > 0.5">
Now you see me</p>
<p v-else>
Now you don&#39;t
</p></pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><p v-if="type === &#39;A&#39;">
A
</p>
<p v-else-if="type === &#39;B&#39;">
B
</p>
<p v-else-if="type === &#39;C&#39;">
C
</p>
<p v-else>
Not A/B/C
</p></pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>
v-else
元素必須緊跟著帶v-if 或v-else-if 的元素的後面，否則它將不會被識別。
v-else
，v-else-if 也必須緊接在帶v-if 或v- else-if 的元素之後。
另一個用來根據條件顯示元素的選項是
v-show
指令。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><h1 v-show="ok">Hello!</h1></pre><div class="contentsignin">登入後複製</div></div>不同的是帶有 v-show<p> 的元素總是會被渲染並保留在 DOM 中。 <code>v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，
v-show 不支援 <template> 元素，也不支援 v-else。
v-if
是「真正」的條件渲染，因為它會確保在切換過程中條件區塊內的事件監聽器和子元件適當地被銷毀和重建。
v-if
也是惰性的：如果在初始渲染時條件為假，則什麼也不做－直到條件第一次變成真時，才會開始渲染條件塊。
v-show
就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。 <p>一般來說，<code>v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
相關推薦：
Vue.js—條件渲染
#
以上是Vue.js條件渲染詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
