【Vue】V-if 顯示/不顯示、頁籤的功能 /v-else-if是什麼？/ :key很重要/ v-show跟v-if的差別

v-if / v-else-if

• v-if= true則顯示dom元素/false則移除dom元素
• v-else-if 跟鄰近的v-if連動

          <div v-if="isSuccess">成功!</div>
          <div v-else-if="!isSuccess">失敗!</div>
           <input type="checkbox" id="isSuccess" v-model="isSuccess"> //連結v-model資料

            data: {
              isSuccess: true,
            }

v-else-if做籤頁

• 記得用click.prevent阻止他往上跑
• 籤頁u要用:class=”{‘active’:link == ‘a’} 轉換active

<ul class="nav nav-tabs">
            <li class="nav-item">
              <a class="nav-link" href="#" :class="{'active':link == 'a'}" @click.prevent="link = 'a'">標題一</a>    //點擊時就把link轉成a，還有套用active的class
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" :class="{'active':link == 'b'}" @click.prevent="link = 'b'">標題二</a>  //點擊時就把link轉成b，還有套用active的class
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" :class="{'active':link == 'c'}" @click.prevent="link = 'c'">標題三</a>   //點擊時就把link轉成c，還有套用active的class
            </li>
          </ul>

<div class="content">
            <div v-if="link == 'a'">Ａ</div>   // v-if 的link如果是a 就顯示A
            <div v-if="link == 'b'">Ｂ</div>  // v-if 的link如果是b 就顯示B
            <div v-if="link == 'c'">Ｃ</div>  // v-if 的link是c 就顯示C
</div>

​

:key

• 如果沒有加:key ，v-if不會把他置換

<template v-if="loginType === 'username'">
            <label>Username</label>
            <input class="form-control" placeholder="Enter your username" :key="1">
          </template>
          <template v-else>
            <label>Email</label>
            <input class="form-control" placeholder="Enter your email address" :key="2">
</template>

v-show和v-if的差別

• v-show是用display:none切換的方式讓東西消失
• v-if是直接把dom元素放置和移除

      <div class="alert alert-success" v-show="isSuccess">成功!</div>
      <div class="alert alert-danger" v-show="!isSuccess">失敗!</div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="isSuccess2" v-model="isSuccess">
        <label class="form-check-label" for="isSuccess2">啟用元素狀態</label>
      </div>
    </div>

​

template

• template不會被渲染

           <template v-if="showTemplate">
              <tr>
                <td>1</td>
                <td>安妮</td>
              </tr>
              <tr>
                <td>2</td>
                <td>小明</td>
              </tr>
            </template>

            data: {
             showTemplate: true,
            }

​