vue v-if —render if true
滿足條件時才渲染組件
3 min readAug 8, 2020
索引index
基本用法: v-if, v-else-if, v-else
確保不同component各別渲染: 加上:key
與v-for一起使用?: v-if with v-for
與v-show比較: v-if v.s. v-show
react同情境的寫法
基本用法: v-if, v-else-if, v-else
v-if=”SOMETHING_TRUE”
// if中的值如果為true,則該component會被渲染v-else-if=”SOMETHING_TRUE”
// 同elseif語法,如果if不為true,而此else-if為true,則指渲染此componentv-else
// if 或 else-if都不為true,最後就渲染該component
確保不同component各別渲染: 加上:key
// 以下相同的component如果沒有加上:key讓vue去做組件的判別,會被認為是同一組件,相關狀態會被保留<template>
<input v-if="inputNow === 'user'" key="username" />
<input v-else-if="inputNow === 'pwd'" key="password" />
</template>
與v-for一起使用?: v-if with v-for
// 不良範例(如果用vue-cli啟動專案, 預設的eslint也會提醒你不要這樣做)
<template>
<ul>
<li
v-for="(singleData, i) in listData"
v-if="singleData.isShow"
:key="i"
>
{{ singleData.text }}
</li>
</ul>
</template>// 較優的範例,在單一component本身就先做v-if// ListItem
<li v-if="singleData.isShow">
{{ singleData.text }}
</li>// List
<template>
<ul>
<ListItem
v-for="(singleData, i) in listData"
:singleData="singleData"
:key="i"
/>
</ul>
</template>
與v-show比較: v-if v.s. v-show
v-show: 等同於在component上使用display: ‘block’ || ‘none’來做顯示的切換,因此不會重新渲染component
v-if: 如果條件為true(v-if中的條件)才會被渲染,為false時會整個從dom中拿掉,因此如果做切換會被重新渲染
結論:
1. v-show適合: 如果component比較複雜,或是需要頻繁做切換,則v-show或許比較適合
2. v-if適合: component如果是在mounted, created之後才有觸發從api獲取資料的行為,則v-if比較適合(例如每次選單展開都從api獲取最新資料…等)
react同情境的寫法
// 基本寫法,使用一般js的判斷式即可
<>
{isShow && <div>Show Here</div>}
</>
組件中if, else判斷範例