iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

log Vue 一下系列 第 7

Vue一下 七日:來談條件啊!

  • 分享至 

  • xImage
  •  

v-if

之前有提過,不過我們來說說更棒的寫法!
老套路,先上官網条件渲染
回到之前大富翁的主題,我們可以在界面上選擇切換:

  • 詳細狀態:有細緻的大頭照、現金、存款、股票、房產數、總資產。
  • 簡易狀態:小張的代表性大頭照、現金、總資產。
    這種切換資料呈現的時候就很適合用v-if
    前面我們是這樣寫:
<h1 v-if="userInterface == true">詳細狀態</h1>
<h1 v-if="userInterface == false">簡易狀態</h1>
<button @click='userInterface = !userInterface'>切換介面</button>

我們可以改成這樣:

<h1 v-if="userInterface">詳細狀態</h1>
<h1 v-else>簡易狀態</h1>
<button @click='userInterface = !userInterface'>切換介面</button>

template

我們把狀態標頭設定好了,再來把其他的細項加進去

<h1 v-if="userInterface">詳細狀態</h1>
    <img src='photo' alt='精緻的大頭照'>
    <ul>
        <li>現金</li>
        <li>存款</li>
        <li>股票</li>
        <li>房產數</li>
        <li>總資產</li>
    </ul>
<h1 v-else>簡易狀態</h1>
    <img src='thumnail' alt='小張的簡陋的大頭照'>
    <ul>
        <li>現金</li>
        <li>總資產</li>
    </ul>

接下來很簡單,在每個<img>、<ul>裡面寫 v-if就可以囉~
事實上並不是這樣的,我們可以不要沒事找事做,
可以用兩個 <div>把他們各自裝起來,在 <div>裡面寫 v-if就好啦~
但vue有其他的寫法:

<template v-if="userInterface">
<h1>詳細狀態</h1>
    <img src='photo' alt='精緻的大頭照'>
    <ul>
        <li>現金</li>
        <li>存款</li>
        <li>股票</li>
        <li>房產數</li>
        <li>總資產</li>
    </ul>
</template>
<template v-else>
<h1>簡易狀態</h1>
    <img src='thumnail' alt='小張的簡陋的大頭照'>
    <ul>
        <li>現金</li>
        <li>總資產</li>
    </ul>
</template>

使用<template>,在檢視原始碼的時候不會被輸出

上面都有使用到 <else>,官網有個提醒事項

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

v-else-if

再來我們來做出整頁玩家資料的頁面,
我們想看更詳細的資料而且不只能看自己的,還能切換成其他玩家的,
這種切換多頁的功能先前也有提過,那我們這次使用v-else-if,它可以讓條件互相有關聯性

<div v-if="name === '金背背'">
  ...其他資料內容...
</div>
<div v-else-if="name === '金價背'">
    ...其他資料內容...
</div>
<div v-else-if="name === '金狼狽'">
    ...其他資料內容...
</div>

這裡也有else,所以要遵循官網提醒的事項

key

這個 key我覺得沒有內化的很好,了解意思但沒辦法好好的白話舉例敘述,
請直接看官網範例:用 key 管理可复用的元素
這個範例是有一個輸入框,起先是填入username,填入後點按鈕會變填入email,
但我剛填在text input框框中的字不會因為點按鈕後消除而是保留,這樣操作上不直覺,
所以用 key來處理掉這個問題。

帥Alex大廚在做動畫演示時也有用到key,建議先看全片,提到時間點在10m10s:
風味沙拉 - 天然 CSS 過場佐 jQuery 動畫

v-show

v-if的用法幾乎一樣,不同於:

  • 渲染後v-if是用註解的方式藏匿;v-show是用display:none的方式
  • v-show不支持<template>
  • v-ifv-else可以用;v-show沒有

至於要用哪個?官網這樣說

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

小結

最後面官網有提到:避免v-forv-if共用,這牽涉到權重跟撰寫風格的問題,等多些經驗後再回頭來看應助益較大。今天就說到這邊啦~我以前都用看起來很有氣勢的沙隆巴斯或錢夫人


上一篇
Vue一下 六日:Class與Style綁定
下一篇
Vue一下 八日:computed/watch
系列文
log Vue 一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言