Vue学习日记之v-if和v-show的使用

  v-if和v-show使用效果都是一样的，根据传入的值，隐藏或显示内容。

  不同的是v-if可以搭配v-else使用，当传入v-if的值为true时，v-if显示，否则v-else显示。

看个例子

<div id="app">
  <input type="button" :value="toggle" @click="add">
    <p v-if="flag">这是v-if的实例，当flag为true时可以看到</p>
    <p v-else>这是一个v-else的实例，当flag为false时可以看到</p>
    <p v-show="flag">这是一个v-show的实例</p>
</div>
</body>
<script>
  var vm=new Vue({
      el:"#app",
      data:{
          toggle:"隐藏",
          flag:true,
          count:0
      },
      methods:{
      add:function () {
          this.flag=!this.flag;
          this.count++;
          if(this.count%2!=0){
              this.toggle="显示";
          }
          if(this.count%2==0){
              this.toggle="隐藏";
          }
      }
      }
  })
</script>

运行结果：

点击按钮后

我们可以看到，当flag为true时，v-if和v-show都显示了，点击按钮，通过add函数将flag置false之后，v-if和v-show显示都消失了，然而v-else显示了。

  v-if和v-show的不同点在于，当我们将flag置false时，打开控制台我们可以看到，v-if是整个DOM节点都被删除掉了，而v-show是将display="none"来隐藏的。

  总的来说是：

 v-if有较高的切换性能消耗，需频繁创建或删除元素时，不要使用v-if。

 v-show有较高的初始渲染性能消耗，元素永远也不会被用户看到，不要使用v-show。