Vue一下七日：來談條件啊！

2019鐵人賽

PeterLiao

2018-10-22 23:09:41

661 瀏覽

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 動畫