Vue之v-if与v-show的区别

v-if与v-show的区别
v-if的显示和隐藏实在dom里创建和消除dom节点
v-show是用css样式的display来控制dom节点的显示和隐藏

例子:

<div id="root">
    <div v-if="isOk">{{content}}</div>
    <div class="button" @click="toggle">toggle</div>
 </div>
 <script>
export default {
  data(){
    return{
      content:"提交",
      isOk:true
    }
  },
  methods:{
    toggle: function(){
      this.isOk = !this.isOk
    }
  }
}
</script>

使用v-if,isOk为true时

使用v-if,isOk为false时

将v-if改为v-show,isOk为true时

isOk为false时