之前有提過,不過我們來說說更棒的寫法!
老套路,先上官網条件渲染
回到之前大富翁的主題,我們可以在界面上選擇切換:
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>
我們把狀態標頭設定好了,再來把其他的細項加進去
<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
,它可以讓條件互相有關聯性
<div v-if="name === '金背背'">
...其他資料內容...
</div>
<div v-else-if="name === '金價背'">
...其他資料內容...
</div>
<div v-else-if="name === '金狼狽'">
...其他資料內容...
</div>
這裡也有else,所以要遵循官網提醒的事項
這個 key
我覺得沒有內化的很好,了解意思但沒辦法好好的白話舉例敘述,
請直接看官網範例:用 key 管理可复用的元素
這個範例是有一個輸入框,起先是填入username,填入後點按鈕會變填入email,
但我剛填在text input框框中的字不會因為點按鈕後消除而是保留,這樣操作上不直覺,
所以用 key
來處理掉這個問題。
帥Alex大廚在做動畫演示時也有用到key
,建議先看全片,提到時間點在10m10s:
風味沙拉 - 天然 CSS 過場佐 jQuery 動畫
跟v-if
的用法幾乎一樣,不同於:
v-if
是用註解的方式藏匿;v-show
是用display:none
的方式v-show
不支持<template>
v-if
有v-else
可以用;v-show
沒有至於要用哪個?官網這樣說
一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if
较好。
最後面官網有提到:避免v-for
跟v-if
共用,這牽涉到權重跟撰寫風格的問題,等多些經驗後再回頭來看應助益較大。今天就說到這邊啦~我以前都用看起來很有氣勢的沙隆巴斯或錢夫人