Vue.js学习笔记（5）

© fengyu学习

再谈 v-if

条件渲染还有哪些被错过的细节

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

1、v-if 与 template

template 这个家伙终于登场了，不过这一次，他仍然是一个配角！

那么在 v-if 主角光环笼罩的今天，template 来凑个什么热闹呢？

一言不合就亮定义，各位看官，请看：

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

通过之前的学习，大家应该都知道v-if指令是放在一个DOM节点上的

比如：

<div id="div1" v-if="show">show为true时显示</div>

如果这个时候，我们有若干个和 div1 同级的节点也需要靠 v-if 指令进行显隐控制，那大家会选择怎么办呢？

会是这样么：

<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，包裹起来。不得不说，这样比第一种好得多，但他还不是最好的方式！

那么究竟是什么法宝，居然如此神奇，可以让我们更简单实现这个功能呢？

那就是：template 。

<template v-if="show">
    <div id="div1">show为true时显示1</div>
    <div id="div2">show为true时显示2</div>
</template>

为什么说这种方式更好呢，因为他不用增加额外的 DOM节点！

第二种方法比他差就差在这一点上，别看一个 DOM节点 掀不起什么波澜，如此的善小，还是为之更好！

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

果然作者设计了v-else这个语法，虽然写2个条件相反的 v-if，也不是不可以。

但是真的让会来程序本就残缺的那些情感，愈加的苍白。

简单的说一下用法：

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

如上面的代码：

在控制台中输入 demo2.show = false; 就可以轻松的显示 v-else 的 template 标签中包含的内容！

3、v-if 与 v-show

马上就要上演一出好戏了，v-show 大闹 v-if 主场！

那么这个 v-show 又是何方神圣呢？不研究不知道，一看吓一跳，那可是厉害的不得了！

还记得Vue学习笔记（2）中的成绩筛选器么？

如果那个条件判断用 v-show 来写，才是王道！

<h2>基于v-show的成绩筛选器</h2>
<div id="score_demo">
    <input type="text" placeholder="您可以接受的最低分数是" 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，会去彻彻底底，认认真真的干一件事情，我真不知道是钦佩呢，还是嘲讽，还是无所谓。

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

原来他只会操控 DOM元素 的 display 属性，简直是机智！

那么问题来了，如果元素的 display 属性并不是 block，而是千奇百怪，各不相同，他能不能机智的恢复呢？

答案：没错，他果然很机智！

这么说来 v-if 的风头要彻彻底底的被 v-show 抢走了么？

答案：不，上天总是会眷顾勤劳的孩子滴！

• 删除类功能：顾名思义，删除功能肯定是不需要页面中再出现某些元素的，既然如此，与其除其表象，不如斩其根本！少一点 DOM，多一点 流畅 !

好吧，只能想到这个了，不过我还可以透露一个关于 v-if 的小秘密。

我曾经在文章中记录过 v-if 不能绑定在 root 实例对象上，当时只是一个记载，经过今天的学习，终于知其所以然！

因为条件判断为 false 时，他会毅然决然地把生他养他的 root 节点干掉，多么的危险啊，所以只能让他，在低维度世界耍耍！

4、结语

第一次在工作日完成了文章的编辑！

篇幅虽然并不是很长，但是知识还是得到消化。

希望这一次的坚持，不再是三分钟热度！

晚安，小伙伴们！