vue v-if —render if true

滿足條件時才渲染組件

Juo Penguin
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判斷範例

--

--

Juo Penguin
Juo Penguin

Written by Juo Penguin

不挑食的雜食者,近期的目標是瘦10公斤。

No responses yet