v-show的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-if和v-show比较,当为true时两个都出现,
当为false时两个都消失,但是v-if是真的删除了,v-show只是定义了一个display: none,隐藏了 -->
<h1 v-if="isflag">{{message}}</h1>
<h1 v-show="isflag">{{message}}</h1>
<button @click="change1">按钮</button>
<button @click="change2">按钮</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "sb",
isflag: true
},
methods: {
change1(){
this.isflag = !this.isflag;
},
change2(){
alert("hello"+this.message);
}
},
})
</script>
</body>
</html>