v-if 和 v-show

v-if

        v-if是惰性的，当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉，在DOM结构中不存在

        template元素：可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来(在界面上不会多出来一层包裹元素)

v-show

        v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件

区别：

• 在用法上：
  • v-show是不支持template
  • v-show不可以和v-else一起使用；
• 本质上：
  • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换
  • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
• 开发中如何选择：
  • 如果需要在显示和隐藏之间频繁的切换，那么使用v-show
  • 如果不会频繁的发生切换，那么使用v-if