<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if v-show</title>
<script src="../lib/js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="change">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
<!-- v-if ： 每次都会重新删除或创建元素
v-show： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display：none 样式
v-if ：有较高的性能切换
v-show ：有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用 v-if，v-show 较好
如果元素可能永远不要显示出来被用户看到，最好使用v-if
-->
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{
change(){
this.flag = !this.flag
}
}
})
</script>
</body>
</html>