vue中v-if和v-show的区别

v-if的使用：
通过判断条件进行显示
v-show:控制元素显示或隐藏
区别：
v-if 是通过操作DOM树进行元素的显示或隐藏，他会直接从DOM树中移除或添加一个元素。切换过程中会销毁监听事件或子组件。适合不频繁的改变元素，且通过后端接口调用的数据进行控制时，操作DOM切换消耗较大。
v-show：通过控制元素的display属性为none进行隐藏、block显示。改变的仅仅是css属性。适合频繁改变元素状态，他带来的消耗是重绘，渲染消耗。
例子：可以在控制台观察DOM结构

<div id="app">
    <button @click="change">切换</button>
    <!-- 操作dom -->
    <p id="p1" v-if="tag">显示tag</p>
    <p id="p2" v-else>此时!tag</p>
    <!-- 控制css中display属性 -->
    <p v-show="tag">tag:display:block; !tag:display:none</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        tag: true
      },
      methods: {
        change() {
          this.tag = !this.tag
        }
      }
    })
  </script>