vue.js條件渲染 v-if else-if v-for

v-if：

在字符串模板中，如 Handlebars ，我們得像這樣寫一個條件塊：

{{#if ok}}     <!-- Handlebars 模板 -->
    <h1>Yes</h1>
{{/if}}

在 Vue.js ，我們使用 v-if 指令實現同樣的功能：

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

因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 元素當做包裝元素，並在上面使用 v-if。最終的渲染結果不會包含 template元素　　

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 

v-else:你可以使用 v-else 指令來表示 v-if 的“else 塊”,但是必須緊跟在v-if或者v-else-if后面搭配一起使用　

<div v-if="i<7">smile</div>
<div v-else>cry</div>

data:{
	i:5
}

 

v-else-if，顧名思義，充當 v-if 的“else-if 塊”。可以鏈式地使用多次：　

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>

　　

用key管理可復用的元素

Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非常快之外，還有一些有用的好處。例如，如果你允許用戶在不同的登錄方式之間切換:

<template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</template>

在上面的代碼中切換loginType將不會清除用戶已經清除的內容，因為兩個模板使用了相同的元素，<input>不會被替換掉--僅僅是替換了他的placeholder　

Vue為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用他們”。只需添加一個具有唯一值的key屬性即可：　

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

現在每次切換時，輸入框都將重新被渲染，這樣元素還是會被高效利用，因為他們沒添加key屬性

 

v-show：也是根據條件展示元素，用法大致一樣

<h1 v-show="ok">Hello!</h1>

不同的是帶有v-show的元素始終會被渲染並保留在DOM中，也就是簡單的切換元素CSS的display屬性（v-show不支持v-else語法）

v-if是“真正的”條件渲染，因為他會確保在切換過程中條件塊內的事件監聽器和子組件適當的被銷毀和重建

v-if也是惰性的：如果在初始渲染是條件為假，就什么也不做——直到條件第一次變為真時，才會開始渲染條件塊

相比之下，v-show就簡單的多——不管初始條件是什么，元素總是會被渲染，並且只是簡單的基於CSS進行切換

一般來說，v-if有更高的切換開銷，v-show有更高的初始化渲染開銷，所以，需要頻繁的切換使用v-show，如果項目運行時條件切換少，就用v-if

 

v-if和v-for一起使用，v-for的優先級要高於v-if