天天看点

vue中v-if和v-show区别

v-if是一个指令  判断条件:当为true时显示标签

标签会从html文档中被移除或者插入

v-show

标签还在html文档中,只是修改了标签的显示属性(display:none)

<div id="app">
    <span v-if="isShow">我是一个span标签</span>
    <span v-show="isShow">我是一个span标签,使用v-show控制</span>
    <button v-on:click="toggleHandle">toggle</button>
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        isShow: true,
      },
      methods: {
        toggleHandle: function() {
          this.isShow = !this.isShow;
        },
      },
    })
  </script>
           

继续阅读