Vue2.5笔记：v-if 和 v-show指令

熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v- 的特殊属性，那么指令有什么作用呢？

我的理解就是：指令是用来控制 DOM 元素的行为，例如最简单的显示，隐藏。

Vue 中有很多指令，在今后的学习过程总我们会逐步的学习，今天我们就来说说我们非常常用的两个条件指令 v-if 和 v-show。

v-if

看到 v-if 你肯定会想到 Javascrip 中的 if else 条件判断语句，你会想是不是还会有 v-else 指令，没错 Vue 中不仅给我们提供了 v-else 指令而且还给我们提供了 v-else-if指令。

既然这样我们就很好理解 v-if 指令了，其实就是根据表达式的值是真(true)假(false)来重建或者销毁一个我们绑定的 DOM 元素。

怎么样，通过我这么一说你对 if 指令有了更清楚的认识了吧？

什么东西啊，你这叫解释的还行？（有些人）

好吧，我觉得我解释的还行，如果你觉得不行，我们就直接一点撸代码写个案例，让你一看就懂。

<div id="root">
    <div v-if="isShow">你看不见我，你看不见我，你看不见我</div>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isShow: false
  }
});
</script>

执行上面的代码，你会发现页面上除了什么都没有，还是什么都没有，总之你什么都看不见，就是不让你看见，怎么办？

我告诉你这个非常好办呀，把它打出来就行了，我们在浏览器的控制台打 vm.isShow=true 你就能看出效果了，不信？那我们就来试试。

看到了上面这个神奇的效果，我们再来思考一个问题，我们上面是在切换单个 DOM 元素，我们能不能来切换多个元素或者说嵌套元素呢？

<div id="root">
    <div v-if="isShow">
      <p>你看不见我，你看不见我，你看不见我</p>
      <p>呀，好像被你发现了！</p>
    </div>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isShow: false
  }
});
</script>

正如我们的预期一样，我们嵌套多层元素也是没有问题的，效果还是那个效果。不过在 Vue 中推荐我们使用 <template> 标签包裹元素。并在上面使用 v-if，最终渲染结果将不包括 <template> 元素。

<div id="root">
    <template v-if="isShow">
      <p>你看不见我，你看不见我，你看不见我</p>
      <p>呀，好像被你发现了！</p>
    </template>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isShow: true
  }
});
</script>

可以看到我们代码中使用的 <template> 标签在渲染的时候没有显示

v-else

上面我们已经提到了 v-else指令，它必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。，我们用一个例子来看下它的用。

<div id="root">
    <h5>Modeng 是怎么样的一个人？</h5>
    <div v-if="isHandsome">非常帅</div>
    <div v-else>还是帅</div>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isHandsome : true
  }
});
</script>

我们会看到这样一个效果

如果我们修改下条件表达式的值

你会发现结果怎么还是帅，难道 Modeng 除了帅就没有别的结果了吗？其实，仔细的同学会发现，两个帅的不一样。

在这里只是和大家开个玩笑，其实我没有大家想象的那么帅，只是想通过这个例子让大家更容易理解和记住 v-else，你会发现我们的 v-if v-else指令和我们理解的 Javascript 中的 if else 一样都是非此即彼的结果。

我们在浏览网站的时候，经常会遇到这么一个情况，你在没有登陆的时候你看到的以一种内容，你在登陆的时候看到的又是另一种内容。如果我们用 if else指令就很好实现，大家可以自己尝试一下，我给一个简单的例子，更好玩的大家去发现。

<div id="root">
    <template v-if="isLogined">
      <div>恭喜，恭喜，你竟然看到了我帅气的容貌！</div>
    </template>
    <template v-else>
      <div>登陆才可以查看更多内容</div>
    </template>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isLogined : false
  }
});
</script>

v-else-if

顾名思义，我们不做过多的解释，因为前面我们已经解释过，大家都明白的，v-else-if 还可以连续使用。

v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<div id="root">
    <div v-if="type === 'A'">我是谁？</div>
    <div v-else-if="type === 'B'">我在哪？</div>
    <div v-else-if="type === 'C'">我怎么了？</div>
    <div v-else>谁能救救我！</div>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    type: 'A'
  }
});
</script>

看个动图啥都明白了。

v-show

另外一个根据条件展示 DOM 元素的指令，用法与 v-if大致相同。

不同点是：v-if控制的DOM元素的添加与删除，会存在 DOM 的渲染与销毁的过程。而 v-show 只是简单的控制元素的 CSS 的 display 属性。

当 v-show 的值为 true 时，绑定 DOM 的 display: block，当值为 false 时，绑定 DOM 的 display: none。

<div id="root">
    <div v-show="isShow">我只是用来控制 display 的属性值</div>
</div>
<script>
var vm = new Vue({
  el: "#root",
  data: {
    isShow: true
  }
});
</script>

我们可以清楚的看到 DOM 元素始终是存在的，v-show 只是利用元素的 display 属性控制着元素的显示隐藏。

注意，v-show 不支持 <template> 元素，也不支持 v-else

v-if 与 v-show

看完了文章，你会发现我们可以利用v-if和v-show 两个指令来控制我们 DOM 元素的行为。但是两者又存在一定的区别，那么你该如何去选择使用那个指令呢？

来一起看官方的回答：

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

总结

1. 我们可以利用不同的方法去控制我们的 DOM 行为。
2. v-if和v-show 都可以控制元素的显示隐藏但是有本质区别的，v-if 是控制元素的添加与删除，而 v-show 只是控制元素的 display 属性。
3. 认识到两者的区别我们就可以肯定自己的场景去选择对应的方法，如果你的元素频繁切换建议使用 v-show，反之你可以使用 v-if。

关注微信公众号：六小登登。领取全套学习资源