18 v-if和v-show的使用

1.v-if 的特点：每次都会重新删除或创建元素

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

3.v-if 有较高的切换性能消耗

4.v-show 有较高的初始渲染消耗

5.如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show 

6.如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if 

 

demo 

 

<script>
// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({
el: '#app',
data: {
flag: false,
yesOk:false,
msg:"测试修饰符lazy",
},

methods: {
toggle() {
this.flag = !this.flag
}
}
});
</script>

 

<input type="button" value="toggle" @click="toggle">
<input type="button" value="toggle" @click="flag=!flag">  2个点击都可以实现

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