iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
2
自我挑戰組

前端新手筆記-Vue.js系列 第 9

Day9 Vue指令V-if、V-show介紹

  • 分享至 

  • xImage
  •  

前言

昨天介紹完V-for,我們應該對於常見V-for用法有更深入的認識。如:顯示過濾資料,也介紹了使用V-for上需要注意地方,如:不要把V-forV-if一起使用。而我們今天要介紹的主題就是V-ifV-show。有寫過JS,一定對於if、else判斷式不陌生,而今天這兩個指令,也具備類似功能,那我們就廢話不多說開始認識吧!

本文同步發表於Andy's Blog

官網資料
練習範例檔案


V-if & V-show

用途:條件性地渲染內容。這塊內容只會在指令的表達式返回truthy值的時候被渲染。
練習連結

    <h1 v-if="cond1">Yes</h1>
    <h1 v-else>No</h1>
    <hr>
    <h1 v-show="cond1">Yes</h1>

    var vm = new Vue({
      el: '#app',
      data: {
        cond1: true
      }
    });

V-if、V-else切換

<div class="alert alert-success" v-if="isSuccess">成功!</div>
<div class="alert alert-danger"  v-else>失敗!</div>

備註:V-else元素必須緊跟在帶v-if或者v-else-if的元素的後面,否則它將不會被識別。

在Template元素上使用v-if條件渲染分組

用途:同時綁定多個元素,維護程式碼整潔,且template不會渲染在畫面上。template 無法與 v-show 共⽤用

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

v-else-if切換分頁

<p>使用 v-else-if 做出分頁頁籤</p>
<a class="nav-link" href="#"  @click.prevent="link='a'">標題一</a>
<a class="nav-link" href="#" @click.prevent="link='b'">標題二</a>
<a class="nav-link" href="#" @click.prevent="link='c'">標題三</a>

          <div class="content">
            <!-- 記得要用 邏輯運算子 === 來判斷是否相同  -->
            <!-- =是賦予值 -->
            <div v-if="link === 'a'">A</div>
            <div v-else-if="link === 'b'">B</div>
            <div v-else-if="link === 'c'">C</div>
          </div>

key管理可複用的元素

Vue渲染網頁時候,並不會從頭開始渲染而是會複用相同元素,使得載入速度加快。而這時候如果我們想要重新渲染就需要用key屬性來添加唯一值

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

備註:key可以自行命名

V-if & V-show差異:

<div class="alert alert-success" v-show="isSuccess">成功!
</div>

<div class="alert alert-danger" v-show="!isSuccess">失敗!</div>

說明:
v-if 與 v-show 最大的差別在是否對 DOM 操作,v-if 會依照條件決定是否將元件渲染⾄至網⾴頁上。
V-show一定會產生出物件,但是以CSS方式切換顯示與否(display:none),
所以當頻繁切換是否顯示時當然使用V-show效能較好。

小結論

結論:
V-if:操控dom元素
V-show:操控display:none


上一篇
Day8 Vue 指令V-for介紹
下一篇
Day10 Vue computed 屬性介紹
系列文
前端新手筆記-Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言