© 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、结语
第一次在工作日完成了文章的编辑！
篇幅虽然并不是很长，但是知识还是得到消化。
希望这一次的坚持，不再是三分钟热度！
晚安，小伙伴们！
