v-show / if Show Hidden

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">

</head>

<body>
 
<div class="container" id='app'>
<H2 v-if = 'flag'> What is the word </ h2>
<button @click='show'>按钮</button>
 
</div>

<script>
was vm = new Vue ({
el: "#app",
data: {
flag:false
 
},
methods: {
show(){
this.flag=!this.flag
}
},
 
 
});
</script>


</body>

</html>

Guess you like

Origin www.cnblogs.com/xiannv/p/10973876.html