# 條件渲染
## v-if
`v-if`指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。
~~~html
<h1 v-if="awesome">Vue is awesome!</h1>
~~~
也可以用`v-else`添加一個“else 塊”:
~~~html
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>
~~~
### 在`<template>`元素上使用`v-if`條件渲染分組
因為`v-if`是一個指令,所以必須將它添加到一個元素上。但是如果想切換多個元素呢?此時可以把一個`<template>`元素當做不可見的包裹元素,并在上面使用`v-if`。最終的渲染結果將不包含`<template>`元素。
~~~
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
~~~
### [`v-else`](https://cn.vuejs.org/v2/guide/conditional.html#v-else "v-else")
你可以使用`v-else`指令來表示`v-if`的“else 塊”:
~~~
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
~~~
`v-else`元素必須緊跟在帶`v-if`或者`v-else-if`的元素的后面,否則它將不會被識別。
### [`v-else-if`](https://cn.vuejs.org/v2/guide/conditional.html#v-else-if "v-else-if")
> 2.1.0 新增
`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>
~~~
類似于`v-else`,`v-else-if`也必須緊跟在帶`v-if`或者`v-else-if`的元素之后。
### [用`key`管理可復用的元素](https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0 "用 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`。
自己動手試一試,在輸入框中輸入一些文本,然后按下切換按鈕:
Username
Toggle login type
這樣也不總是符合實際需求,所以 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>
~~~
現在,每次切換時,輸入框都將被重新渲染。請看:
Username
Toggle login type
注意,`<label>`元素仍然會被高效地復用,因為它們沒有添加`key`屬性。
## [`v-show`](https://cn.vuejs.org/v2/guide/conditional.html#v-show "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`](https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show "v-if vs v-show")
`v-if`是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
`v-if`也是**惰性的**:如果在初始渲染時條件為假,則什么也不做——直到條件第一次變為真時,才會開始渲染條件塊。
相比之下,`v-show`就簡單得多——不管初始條件是什么,元素總是會被渲染,并且只是簡單地基于 CSS 進行切換。
一般來說,`v-if`有更高的切換開銷,而`v-show`有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用`v-show`較好;如果在運行時條件很少改變,則使用`v-if`較好。
## `v-if`與`v-for`一起使用
**不推薦**同時使用`v-if`和`v-for`。
當`v-if`與`v-for`一起使用時,`v-for`具有比`v-if`更高的優先級。請查閱[列表渲染指南](https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if)以獲取詳細信息。
## 一個綜合的例子
```
<template>
<div>
<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>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {};
},
computed: {
type() {
let arr = ["A", "B", "C", "D"];
return arr[this.random(0, arr.length - 1)];
}
},
methods: {
random(n, m) {
//構造隨機整數[n..m]
var random = Math.floor(Math.random() * (m - n + 1) + n);
return random;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- iView
- iView快速入門
- 課程講座
- 環境配置
- 第3周 Javascript快速入門