一、Vue的條件渲染

1.1.v-if

??

if 顧名思義，就是如果滿足一個(gè)條件后，執(zhí)行下面的步驟，和我們學(xué)的基礎(chǔ)語法是一樣的，只是這里在Vue中稍微換了一下而已

v-if=“條件” if后面的內(nèi)容只有在條件為true時(shí)，才會(huì)被渲染出來

<div class="info" v-if="Object.keys(info).length">
        <h2>個(gè)人信息</h2>
        <ul>
          <li>姓名：{{info.name}}</li>
          <li>年齡:{{info.age}}</li>
        </ul>
 </div>

 v-if的渲染原理：

• v-if是惰性的；
• 當(dāng)條件為false時(shí)，其判斷的內(nèi)容完全不會(huì)被渲染或者會(huì)被銷毀掉；
• 當(dāng)條件為true時(shí)，才會(huì)真正渲染條件塊中的內(nèi)容；

1.2.v-if-else

??

v-if-else

我們可以想到 基礎(chǔ)語法的 if else

沒錯(cuò)也是一樣的道理 

v-if=“條件” 如果條件不滿足，執(zhí)行else

<div class="info" v-if="Object.keys(info).length">
   <h2>個(gè)人信息</h2>
</div>

 <div v-else>
  	<h2>沒有輸入個(gè)人信息</h2>
 </div>

1.3.v-else-if

??

v-else-if 和if搭配使用

且v-else-if可以使用多次（一般用于多種情況下）

v-else-if 只能和if在一起使用

<h1 v-if="score > 90">優(yōu)秀</h1>
<h2 v-else-if="score > 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格啦</h2>

 1.4.template元素

??

template：模板的意思

當(dāng)我們不想讓div這種元素被渲染的時(shí)候，可以使用template

因?yàn)閠emplate是作為占位符，用于包裹元素，自身并沒有被渲染出來
 
注意點(diǎn)：每個(gè)組件根template （最外層的template）只能有一個(gè)子元素，非根template沒有限制。

 template元素可以當(dāng)做不可見的包裹元素，并且在v-if上使用，但是最終template不會(huì)被渲染出來：

<template v-if="Object.keys(info).length">
        <h2>個(gè)人信息</h2>
        <ul>
          <li>姓名：{{info.name}}</li>
          <li>年齡:{{info.age}}</li>
        </ul>
      </template>

<template v-else>
        <h2>沒有輸入個(gè)人信息</h2>
</template>

 1.5.v-show

??

v-show的用法和v-if一樣

<div v-show="isShowCode">
        <img
          src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/app_download_QR.cbe9f32.png"
          alt=""
        />
</div>

1.6.v-show和v-if的區(qū)別

??

v-if和v-show區(qū)別

用法上：

v-show是不支持template；v-show不可以和v-else一起使用

本質(zhì)的區(qū)別：

v-show元素?zé)o論是否需要顯示到瀏覽器上，它的DOM實(shí)際都是有存在的，只是通過CSS的display屬性來進(jìn)行切換；v-if當(dāng)條件為false時(shí)，其對(duì)應(yīng)的原生壓根不會(huì)被渲染到DOM中；

如何選擇

如果我們的原生需要在顯示和隱藏之間頻繁的切換，那么使用v-show；如果不會(huì)頻繁的發(fā)生切換，那么使用v-if；

v-if

• 是真正的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中事件內(nèi)的**事件監(jiān)聽器和子組件適當(dāng)?shù)帽讳N毀和重建。
• 是有惰性的：如果在初始渲染的時(shí)候事件為假，則什么也不做，直到條件第一次變?yōu)檎娴臅r(shí)候，才會(huì)開始渲染條件塊

v-show

相比v-show就簡(jiǎn)單的多，不管初始條件是什么，元素始終都會(huì)被渲染，而且只是簡(jiǎn)單地基于css進(jìn)行切換。

兩者的使用

一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷，因此，如果需要非常頻繁地切換，則用v-show更好一些；如果運(yùn)行的條件很少改變，則用v-if更好。

總結(jié)

到此這篇關(guān)于Vue中v-if、v-if-else、v-else-if與v-show基本使用的文章就介紹到這了,更多相關(guān)Vue v-if、v-if-else、v-else-if、v-show使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論