### v-if
可以搭配v-else
```
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>
```
#### 在<template>上使用v-if條件渲染分組
v-if 如何切換多個元素呢?
<template>當做不可見的包裹元素,最終渲染不包括:
```
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
```
#### v-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
2.1.0 新增,充當 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管理可復用的元素
```
<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中,v-show只是簡單切換元素的CSS屬性display。
注意,v-show 不支持 <template> 元素,也不支持 v-else。
#### v-show vs v-if
v-if 真正的條件渲染,切換過程中條件內的事件監聽器和子組件適當第被銷毀和重建。一般來說:
v-if有更高的切換開銷,v-show有更高的初始渲染開銷。如果要非常頻繁地切換,使用v-show較好,如果運行條件很少改變,則使用v-if。
### v-if 與 v-for 不推薦一起使用
同時使用時,v-for 具有比v-if更高的優先級
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS