Vue-click事件點擊按鈕切換內容示例代碼

<template>
    <div @click="enter"  id="dian" v-bind:class="{ 'you' : flag, 'you2': !flag}">{{con}}</div> 
    <!-- 定義兩個class，當開關打開對應you樣式，開關關閉對應you2樣式  -->
</template>
<script>
export default {
    data(){
    return{
      con:"+關注",
      flag:false//單位切換開關 
    }
  },
   methods:{
     enter:function(){
       this.flag=!this.flag;
       if(this.flag==true){
          this.con="已關注";
       }else if(this.flag==false){
          this.con="+關注";
       }
     },
   }
 
}
</script>
<style  scoped>
.you {
  font-size: 15px;
  background: #42c02e;
  height: 38px;
  width: 100px;
  float: right;
  border-radius: 30px;
  margin: 23px 0 23px 16px;
  text-align: center;
  line-height: 35px;
  color:white;
  font-weight: 700;
}
.you2 {
  font-size: 15px;
  background: #bdbebd;
  height: 38px;
  width: 100px;
  float: right;
  border-radius: 30px;
  margin: 23px 0 23px 16px;
  text-align: center;
  line-height: 35px;
  color:white;
  font-weight: 700;
}
</style>