<template>
<div>
<h1 v-if="user=='超级VIP'">欢迎金主爸爸</h1>
<h1 v-else-if="user=='VIP'">欢迎会员登录</h1>
<h1 v-else>充值会让你更强大</h1>
<button @click="toggleuser">vip过期</button>
<!-- 设置1个内容切换显示 隐藏<h1 style="display: none;">切换显示内容</h1> -->
<h1 v-show="isShow">切换显示内容</h1>
<button @click="toggleShow">切换</button>
</div>
</template>
<script>
//命令式
//document.querySelector("h1").innerHTML="helloworld"
//声明式, 先声明出变量。
export default{
name:'App',
data(){
return{
user:"VIP",
isShow:true
}
},
methods:{
toggleuser(){
this.user = "普通用户"
},
toggleShow(){
this.isShow = !this.isShow
}
}
}
</script>
<style>
/* 表示类名 */
.active{
background: yellowgreen;
}
</style>