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


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

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

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

          
你看不见我，你看不见我，你看不见我
      
呀，好像被你发现了！
    


    <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="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 的元素之后。

    我是谁？