? fengyu學(xué)習(xí)

再談 v-if

條件渲染還有哪些被錯過的細(xì)節(jié)

v-if 、 v-else 、 template 、 v-show

1、v-if 與 template

template 這個家伙終于登場了，不過這一次，他仍然是一個配角！

那么在 v-if 主角光環(huán)籠罩的今天，template 來湊個什么熱鬧呢？

一言不合就亮定義，各位看官，請看：

• template 的作用：將 指令 的 作用域，拓展到多個元素身上

通過之前的學(xué)習(xí)，大家應(yīng)該都知道v-if指令是放在一個DOM節(jié)點上的

比如：

<div id="div1" v-if="show">show為true時顯示</div>

如果這個時候，我們有若干個和 div1 同級的節(jié)點也需要靠 v-if 指令進(jìn)行顯隱控制，那大家會選擇怎么辦呢？

會是這樣么：

<div id="div1" v-if="show">show為true時顯示1</div>
<div id="div2" v-if="show">show為true時顯示2</div>

這要有 10000 個，不得多寫多少個 v-if 啊!

有些小伙伴說，那我可不可以這樣呢：

<div id="wrap" v-if="show">
    <div id="div1">show為true時顯示1</div>
    <div id="div2">show為true時顯示2</div>
</div>

多加一個 wrap 元素，把判斷一致的子 div，包裹起來。不得不說，這樣比第一種好得多，但他還不是最好的方式！

那么究竟是什么法寶，居然如此神奇，可以讓我們更簡單實現(xiàn)這個功能呢？

那就是：template 。

<template v-if="show">
    <div id="div1">show為true時顯示1</div>
    <div id="div2">show為true時顯示2</div>
</template>

為什么說這種方式更好呢，因為他不用增加額外的 DOM節(jié)點！

第二種方法比他差就差在這一點上，別看一個 DOM節(jié)點 掀不起什么波瀾，如此的善小，還是為之更好！

PS:

• template 元素不能是綁定 vue 實例的root元素，如果你不小心犯了這個錯誤，你會和我一樣看到下面這條警告：[Vue warn]: Attribute "id" is ignored on component <template> because the component is a fragment instance

2、v-if 與 v-else

果然作者設(shè)計了v-else這個語法，雖然寫2個條件相反的 v-if，也不是不可以。

但是真的讓會來程序本就殘缺的那些情感，愈加的蒼白。

簡單的說一下用法：

 <div id="vue_demo2">
     <div id="show1">固定顯示內(nèi)容1</div>
     <div id="show2">固定顯示內(nèi)容2</div>
     <div id="show3">固定顯示內(nèi)容3</div>
     <template v-if="show">
         <div id="content1">show為true顯示內(nèi)容1</div>
         <div id="content2">show為true顯示內(nèi)容2</div>
         <div id="content3">show為true顯示內(nèi)容3</div>
     </template>
     <template v-else>
         <div id="content1">show為false顯示內(nèi)容1</div>
         <div id="content2">show為false顯示內(nèi)容2</div>
         <div id="content3">show為false顯示內(nèi)容3</div>
     </template>
 </div>
 <script>
     var demo2 = new Vue({
         el: '#vue_demo2',
         data: {
             show: true
         }
     })
 </script>

如上面的代碼：

在控制臺中輸入 demo2.show = false; 就可以輕松的顯示 v-else 的 template 標(biāo)簽中包含的內(nèi)容！

3、v-if 與 v-show

馬上就要上演一出好戲了，v-show 大鬧 v-if 主場！

那么這個 v-show 又是何方神圣呢？不研究不知道，一看嚇一跳，那可是厲害的不得了！

還記得Vue學(xué)習(xí)筆記（2）中的成績篩選器么？

如果那個條件判斷用 v-show 來寫，才是王道！

<h2>基于v-show的成績篩選器</h2>
<div id="score_demo">
    <input type="text" placeholder="您可以接受的最低分?jǐn)?shù)是" v-model="scoreMin">
    <p v-for="data in scoreArr"  v-show="data.score >= scoreMin">
        {{data.name}} : {{data.score}}
    </p>
</div>

<script>
var scorevm = new Vue({
    el: '#score_demo',
    data: {
        scoreArr: [
            {score: 60, name:"封小胖"},
            {score: 70, name:"三哥"},
            {score: 80, name:"四哥"},
            {score: 90, name:"七弟"},
            {score: 100, name:"強狗"}
        ],
        scoreMin: 60
    }
});
</script>

從程序上來看，并沒有什么改動，但是為什么說 v-show 會更好呢？

因為 v-if 這個傻孩子，居然會在控制顯隱的時候，費心費力的把元素徹底干掉?。ㄔ?DOM 里徹底，在 Vue 里還有一份編譯過的）

在做好表面工作就足以的今天，居然有一個指令 v-if，會去徹徹底底，認(rèn)認(rèn)真真的干一件事情，我真不知道是欽佩呢，還是嘲諷，還是無所謂。

那么 v-show 又是怎么偷懶的呢？

原來他只會操控 DOM元素 的 display 屬性，簡直是機智！

那么問題來了，如果元素的 display 屬性并不是 block，而是千奇百怪，各不相同，他能不能機智的恢復(fù)呢？

答案：沒錯，他果然很機智！

這么說來 v-if 的風(fēng)頭要徹徹底底的被 v-show 搶走了么？

答案：不，上天總是會眷顧勤勞的孩子滴！

• 刪除類功能：顧名思義，刪除功能肯定是不需要頁面中再出現(xiàn)某些元素的，既然如此，與其除其表象，不如斬其根本！少一點 DOM，多一點 流暢 !

好吧，只能想到這個了，不過我還可以透露一個關(guān)于 v-if 的小秘密。

我曾經(jīng)在文章中記錄過 v-if 不能綁定在 root 實例對象上，當(dāng)時只是一個記載，經(jīng)過今天的學(xué)習(xí)，終于知其所以然！

因為條件判斷為 false 時，他會毅然決然地把生他養(yǎng)他的 root 節(jié)點干掉，多么的危險啊，所以只能讓他，在低維度世界耍耍！

4、結(jié)語

第一次在工作日完成了文章的編輯！

篇幅雖然并不是很長，但是知識還是得到消化。

希望這一次的堅持，不再是三分鐘熱度！

晚安，小伙伴們！