<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>