本人是前端的初学者，也在自学Vue.js,在自己编写系统的过程遇到的小问题，在这里分享给大家，若有什么不对的地方还请各位指正喔(づ￣ 3￣)づ

一、效果

二、前端代码

这是静态页面代码部分（就两个简单的按钮组件，绑定了两个事件）

<template>
    <div class="test">
        <button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button>
        <button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button>
    </div>
</template>

css样式的部分

<style>
    button{
      padding: 20px;
      color: #555;
    }
    .Color{
      background-color: #ffd700;
      color: #fff;
    }
</style>

三、vue.js代码

        其实就是利用了vue.js的样式绑定的内容，mgeColor和pwdColor属性为true的时候，绑定的Color样式是执行的，反之mgeColor和pwdColor属性为false的时候绑定的Color样式是不执行的，所以点击按钮1触发mgebtn事件，将mgeColor和pwdColor默认值进行改变，以达到样式的改变，按钮2的绑定事件也是同理的。

这是script部分的代码

<script>
export default {
  name: 'test',
  data () {
    return {
      mgeColor: true,
      pwdColor: false
    }
  },
  methods: {
    pwdbtn () {
      this.mgeColor = false
      this.pwdColor = true
    },
    mgebtn () {
      this.mgeColor = true
      this.pwdColor = false
    }
  }
}
</script>

四、代码汇总

以下是代码的汇总(～￣▽￣)～

<template>
    <div class="test">
        <button @click="mgebtn" :class="{'Color':mgeColor}">按钮1</button>
        <button @click="pwdbtn" :class="{'Color':pwdColor}">按钮2</button>
    </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      mgeColor: true,
      pwdColor: false
    }
  },
  methods: {
    pwdbtn () {
      this.mgeColor = false
      this.pwdColor = true
    },
    mgebtn () {
      this.mgeColor = true
      this.pwdColor = false
    }
  }
}
</script>

<style scoped>
    button{
      padding: 20px;
      color: #555;
    }
    .Color{
      background-color: #ffd700;
      color: #fff;
    }
</style>

以上就是本人所分享的内容啦（虽然有点简单(●ˇ∀ˇ●)，但是肯定有些小萌新的），若有什么不对的地方还请各位大佬多多指正喔(づ￣ 3￣)づ