ch6-條件渲染（v-if v-else v-else-if key管理可復用元素 v-show ）

1 v-if

    1.1 簡單使用

<h1 class="h1" v-if="ok">yes</h1>
    <script>
            var  app1 = new Vue({
                el: '.h1',
                data: {
                    ok: true
                }
            });
     </script>

<h2 class="h1" v-if="ok">yes</h2>
<h2 v-else>no</h2>

    ok為true兩個都顯示，false只顯示v-else部分

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

<template id="t1" v-if="ok">
              <h1>Title</h1>
              <p>段落1</p>
              <p>段落2</p>
</template>

    1.3 v-else
        必須跟在v-if或v-else-if元素后面，否則無法識別

    1.4 v-else-if 2.1.0新增，可以鏈式使用多次
        必須跟在v-if 或v-else-if后面

    1.5 用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。

<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>

        每次input會被重新渲染 但label仍然被復用--未添加key值

   2 v-show
        2.1 另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
            <h1 v-show="ok">Hello!</h1>
            不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。
            v-show 是簡單地切換元素的 CSS 屬性 display 。
            注意， v-show 不支持 <template> 語法，也不支持 v-else。

    3 v-if與v-show比較
        v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
        v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
        相比之下， v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
        一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，
        則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

    4 v-if 與 v-for 一起使用
        當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。