6-Vue指令之条件渲染 V-if/else

1.内部指令
Vue 的指令和 HTML 的原生指令相似，这指令容易记忆并且好理解，因为它仅是在原生标签前面加上了 V-前缀：

v-show          v-html
v-else          v-on
v-model         v-bind
v-repeat        v-ref
v-for           v-pre
v-text          v-clock
v-el            v-if 

1.1 v-if
v-if 接受 bool 类型，根据表达式的值在 DOM 中生成或移除一个元素
值为 true 则对应的元素的一个克隆将被重新插入 DOM 中
值为 false 则对应元素就会从 DOM 中移除

 <div id="app">
        <p v-if='greeting'>hello</p>
 </div>

    var vm = new Vue({
        el: '#app',
        data: {
            greeting:false
        }
    })

代码示例中我们发现，* v-if 的值直接影响到了它所绑定的 DOM 元素是否存在*

v-else
也可以用 v-else 添加一个 else 块：

<div id="app">
        <p v-if='greeting'>hello</p>
        <p v-else>no</p>
 </div>

v-else必须紧跟在 v-if 或者 v-show 后面，否则将不会被识别

因为 v-if 是一个指令，需要将它 添加到一个元素上。但是如果我们想切换多个元素呢？

创建一个 <template> 的 v-if 条件组：
此时我们可以把 <template>元素当作一个包装元素，并在上面使用 v-if。
当然，最终的渲染结果不会包含 <template> 元素

 <div id="app">
     <p v-if='greeting'>hello</p>

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

   var vm = new Vue({
        el: '#app',
        data: {
            greeting:false,
            ok: true
        }

    })

用key管理可复用的元素
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了会使 Vue 变得非常快，还会有一些有用的好处。
例如：如果你允许用户在不同的登录方式直接切换：

   <template v-if="loginType" === 'username'">
            <label>username</label>
            <input placeholder="enter your username">
   </template>

   <template v-else>
            <label>Eamil</label>
            <input placeholder="enter your email address">
   </template>

   <input type="button" value='点击切换'>

在上面的代码中切换 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>Eamil</label>
      <input placeholder="enter your email address" key="email-input">
</template>

<input type="button" value='点击切换'>

这样，你每次在切换的时候，输入框都将被重新渲染
注意： <label> 元素依然会被高效的复用，因为他们没有 key 属性

1.2 v-show
v-show 也是用于根据条件展示元素的选项指令，它的用法和 v-if 大致一致

    <div id="app">
        <h1 v-show='ok'>v-show</h1
    </div>

    var vm = new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })

当 v-show 赋值为 false 时，元素将被隐藏，注意是被隐藏，不同于 v-if=false 时 DOM 元素不存在，V-show=false 时的元素始终是存在的并被渲染保留在 DOM 中。只是元素的 css 属性被切换成了 style=”diaplay:none”

注意：v-show 不支持 <template>语法，也不支持 v-else
那既然 v-show 也是一个条件判断语句，我们怎么实现 else 的表达呢？

当将 v-show 用在组件上时，因为指令的优先级， v-else 会出现出现问题，所以我们就不能在用之前的写法

<custom-component  v-show = 'condition'></custom-component>
<p v-show = '!condition'></p>

v-if vs v-show

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

  在切换 v-if 模块时，Vue 有一个局部编译/卸载过程，因为 V-if 中的模板可能包括数据绑定成子组。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说， v-if 有更高的切换消耗，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。