v-if的特点:每次都会重新删除或创建元素,有较高的切换性能消耗
v-show的特点:每次不会重新进行DOM的删除和创建,只是切换 display:none 样式,有较高的初始渲染消耗
如果涉及频繁的切换,最好不要使用,推荐使用v-show
如果元素可能永远也不会被显示出来,则推荐使用v-if
<div id="app">
<!-- 直接在@click里写方法可以不用this. 因为直接写会直接去data里找 -->
<input type="button" value="toggle" @click="flag = !flag">
<!-- v-if的特点:每次都会重新删除或创建元素-->
<!-- v-show的特点:每次不会重新进行DOM的删除和创建,只是切换 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 如果涉及频繁的切换,最好不要使用,推荐使用v-show-->
<!-- v-show 有较高的初始渲染消耗 如果元素可能永远也不会被显示出来,则推荐使用v-if-->
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
},
methods:{
}
})
</script>