一文学会v-if和v-show的区别

v-if 分支判断指令

      语法: v-if='表达式' 当表达式的值为true,这渲染该指令对应的节点, 否则不渲染   
      注意: v-if v-else-if  v-else 这些指令都需要加在兄弟标签上
      注意: 这个if-else 和二阶段逻辑语句 if(){} elseif(){} 一样的,进入到  其中的一个条件,后边就不会执行了
      注意: v-if 如果不满足条件 就不会渲染


html:
<div id="app">
   <p v-if='flag'>v-if</p>
   <button @click='flag=!flag'>切换显示隐藏</button>
<div>

js:
    const vm = new Vue({
        el: '#app',
        data: {
            flag: true,
           
        }
    })

v-show

     语法: v-show='表达式'  当表达式的值为true,这显示该指令对应的节点, 否则不显示

html:
<div id="app">
     <p v-show='flag'>v-show</p>
     <button @click='flag=!flag'>切换显示隐藏</button>
<div>
js:
    const vm = new Vue({
        el: '#app',
        data: {
            flag: true,
           
        }
    })

区别

    01: v-if 是是否渲染的问题, v-show 是是否显示的问题
    02: 如果频繁的操作显示隐藏 建议优先考虑 v-show不会重新创建dom,提高浏览器的性能
v-if有更高的切换开销，而v-show有更高的初始化渲染开销，如果需要非常频繁的切换，则使用v-show较好；若在运行时条件很少改变，则使用v-if较好