v-if和v-show的使用和特点

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

v-if的特点是每次都会重新删除或创建操作

v-show的特点是每次不会进行DOM的删除和创建操作，只是切换了元素的display:none样式

<div id="app">

<input type="button" value="按钮" @click="btn">

<h1 v-if="flag">这是用v-if控制的元素-if<h1>

<h1 v-show="flag">这是用v-show控制的元素<h1>

<h1 v-if="flag">sfasdfa</h1>

</div>

<script>

var vm = new Vue({

el: '#app',

data:{

flag: true

},

methods:{

btn(){

this.flag=!this.flag

}

}

})

</script>