v-show 另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)，類似于 v-if层亿；
與 v-if 不用的是使用 v-show 的元素始終會(huì)被渲染并保留在 DOM 中立美，它只是簡(jiǎn)單的切換元素的 css 屬性碌更。
注：v-show 不支持 <template> 元素洞慎，也不支持 v-else
<template xmlns="http://www.w3.org/1999/html">
<div class="YHStydy">
<h3>2.6 v-show & v-if</h3>
<h4>2.6.1 if</h4>
<span v-if="stateNormal">normal(if)</span>
<span v-if="stateError">error(if)</span>
<h4>2.6.2 show</h4>
<span v-show="stateNormal">normal(show)</span>
<span v-show="stateError">error(show)</span>
<br/>
<span v-show="0<1">max(show)</span>
<span v-show="0>1">min(show)</span>
</div>
</template>
<script>
export default {
name: 'y-h-study',
data() {
return {
stateNormal: true,
stateError: false,
}
}
}
</script>
首先，v-if 執(zhí)行后如果判斷條件為 false 的情況下桦他，它便不會(huì)生成其標(biāo)簽，僅會(huì)將 true 狀態(tài)的內(nèi)容渲染出來圆仔，其效果如下：
其次个从，v-show 執(zhí)行后如果判斷條件為 false 的情況下嗦锐，依然會(huì)生成條件為 false 的標(biāo)簽奕污，但其標(biāo)簽對(duì)應(yīng)的屬性則會(huì)設(shè)置為 style="display: none;"碳默，其效果如下：
最后髓废，通過如上測(cè)試可以得知：
v-if 也是惰性的，若初始渲染時(shí)條件為真(true)時(shí)渲染该抒，它會(huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建慌洪，反之則什么也不做直到條件變?yōu)檎鏁r(shí)，才會(huì)進(jìn)行渲染條件塊凑保；
v-show 則無論初始條件的真?zhèn)卧乜倳?huì)被渲染并且是基于 css 進(jìn)行樣式的切換蒋譬；
兩者間相比較 v-if 在狀態(tài)切換時(shí)占據(jù)開銷更高于 v-show，而 v-show 在初始渲染時(shí)占據(jù)的開銷更高于 v-if愉适；若狀態(tài)需要頻繁的進(jìn)行切換則使用預(yù)先渲染好進(jìn)行樣式切換的 v-show 更占優(yōu)犯助，若運(yùn)行時(shí)條件切換較少的情況下則使用 v-if 更占優(yōu)。
以上便是此次內(nèi)容的小結(jié)维咸，還望大神多多指教剂买！
