1、条件渲染
条件渲染一共有两个v-if 和 v-show
当设置为false时,他们都会使对应标签在浏览器中消失,true的时候都会出现,
而两个条件渲染方法,虽然都是让标签在浏览器中消失,却有所不同。
如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="change1">开关</button>
<div v-if="flag">hello</div>
<div v-show="flag">hello2</div>
</div>
<script>
new Vue({
el:"#app",
data:{
n:0,
n2:true,
flag:true
},
methods:{
change1(){
this.flag=!this.flag
}
}
})
</script>
</body>
</html>