iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 10

[前端暴龍機,Vue2.x 進化 Vue3 ] Day10.條件渲染

當我們有區分,在某種條件下看到的會是 A 畫面,某一些條件下看到的會是 B 畫面...的情形,例如每個會員權限不同所可以使用的功能不同就是一個簡單的例子,這時就可以使用條件渲染

條件渲染

Vue 的條件渲染邏輯跟 Javascript 很相似,所以會有 v-ifv-else-ifv-else可以使用
v-ifv-else-if 後面通常會加上 條件式 來控制該 html 元素 是否要被顯示

<div id="app">
    商品出清 $99 
    <p v-if="proMember">高級會員價 只要 $29</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            proMember: false
        }
    })
</script>

因為 proMember 為 false,所以不會顯示出高級會員價

  • v-if 後面可以接 v-else-ifv-else,不過 v-else 就不需要接條件了,但是 v-else 需與 v-if 一起使用
  • v-ifv-else-ifv-else 可以連用,就會像是 Javascript 的寫法

條件渲染的分組

所有 html 標籤 都可以加上 v-if,但渲染時 html 標籤 也會被渲染出來,所以當不希望有額外多餘的 div 標籤,就可以使用 <template> 元素作為分組,<template> 元素不會像 div 標籤被看見

<div id="app">
    <template v-if="isShow">
        <h1>NOT show</h1>
    </template>
    <template v-else="isShow">
        <h1>Show</h1>
    </template>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        }
    })
</script>

https://ithelp.ithome.com.tw/upload/images/20210816/20120722JR1jFItrOu.jpg
如圖,可以看到並不會出現 <template> 標籤

看似一樣,卻又不一樣的 v-show

另外一個跟 v-if 一樣,可以用來控制可顯示或不顯示的功能 v-show
雖然功能差不多,但實際運作的方式卻不同

v-if : 如果為 false ,不會看到任何程式碼
v-show : 如果為 false,雖然畫面不可見,但是程式碼可見

<div id="app">
   <div v-if="isShow">我是v-if</div>
   <div v-show="isShow">我是v-show</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        }
    })
</script>

https://ithelp.ithome.com.tw/upload/images/20210816/20120722JFFAHe97Vc.jpg
如圖,可看到 v-show,僅僅只是透過 css 的方式,隱藏畫面顯示,所以程式碼還是可見的
但是 v-if 卻是整個連程式碼都不會被看見

用 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>,所以 <input> 並不會被換掉,僅僅替換了 placeholder 的內容
https://ithelp.ithome.com.tw/upload/images/20210816/201207224uQbdCNWlF.jpg
https://ithelp.ithome.com.tw/upload/images/20210816/20120722WZkhMpTbz6.jpg

那麼 Vue 提供了我們一個方法,來獨立區分出這兩個元素 -- 只需要加上唯一值的 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>

https://ithelp.ithome.com.tw/upload/images/20210816/201207224uQbdCNWlF.jpg
https://ithelp.ithome.com.tw/upload/images/20210816/20120722JPAq6U1pE2.jpg
如圖,這兩個 <input> 就個別被獨立出來了,所以當作切換時,輸入框內容也會被清除


參考資料

Vue 官方文件 - 條件渲染


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day9.計算屬性 computed
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day11.列表渲染
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言