vue实现关注与取消关注的按钮

先上效果图：
关注前：

关注后：

鼠标悬浮：

template部分：

<template>
    <div>
      <button   @click="favor"
               class="my_button" :style="{backgroundColor:bg_color, color: ft_color,}"
               @mouseenter="change()" @mouseleave="goback()">
        {{content}}
      </button>
    </div>
</template>

script部分：

<script>
    export default {
        name: "zan",
        data () {
            return{
                liked:false,
                content:'+关注',
                bg_color:"#fef0f0",
                ft_color:"#f56c6c",
            }
        },
        methods:{
            favor (e) {
                this.liked=!this.liked;
                if(this.liked){
                    this.content="已关注";
                    this.bg_color="#f56c6c";
                    this.ft_color="#fef0f0";
                }

                else{
                    this.content="+关注"
                    this.bg_color="#fef0f0";
                    this.ft_color="#f56c6c";

                }
            },
            change(){
                this.bg_color="#ff9999";
                this.ft_color="#fef0f0";
            },
            goback(){
                if(this.liked){
                    this.bg_color="#f56c6c";
                    this.ft_color="#fef0f0";
                }
                else{
                    this.bg_color="#fef0f0";
                    this.ft_color="#f56c6c";
                }
            }
        }
    }
</script>

style部分：

<style >

  button{
    outline:none;
  }

  .my_button{
    color: #f56c6c;
    background: #fef0f0;
    border: #fbc4c4 solid;
    border-radius: 20px;
    padding: 12px 23px;
    text-align: center;
    font-size: 16px;
    -webkit-transform: scale(0.7);
  }

</style>

分析：
1.总的来说，就是一个class(my_button)，三个绑定事件（favor，change，goback），四个全局变量(liked, content,bg_color,ft_color)。主要分析3个绑定事件是如何修改4个全局变量的。

2.my_button用于设定关注按钮的初始样式，参考的是el-button,没什么可分析的。

3.liked变量，记录是否关注，取假表示未关注，取真表示已关注；content变量记录按钮的内容；bg_color按钮背景色，ft_color字体颜色。

4.favor函数：绑定click事件，鼠标点击后修改liked的值，即修改是否点赞的状态；如果liked取真，则修改content为已关注，修改bg_color为#fef0f0，修改ft_color为#f56c6c；如果liked取假，修改bg_color为#f56c6c，修改ft_color为#fef0f0，修改content为+关注