VUE学习十六，条件渲染v-if/v-show
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
一、基本用法
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
二、在 <template> 元素上使用 v-if 条件渲染分组
<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-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 管理可复用的元素
<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的区别，是是否保留用户已经输入的内容。
Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可
六、v-show
用 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
<h1 v-show="ok">Hello!</h1>
注意，v-show 不支持 <template> 元素，也不支持 v-else。
七、整体代码参考
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE简单示范</title> <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script> </head> <body> <div id="app-6"> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <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> <!-- Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可 //--> <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> <h1 v-show="ok">Hello!</h1> </div> <script> var app6 = new Vue({ el: '#app-6', data: { awesome: true, ok: false, type: 'C', loginType : 'username' } }) </script> </body> </html>
八、结果页面参考
本文参考：
https://cn.vuejs.org/v2/guide/conditional.html#v-if
