本人是前端的初学者，也在自学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 = falsethis.pwdColor = true},mgebtn () {this.mgeColor = truethis.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 = falsethis.pwdColor = true},mgebtn () {this.mgeColor = truethis.pwdColor = false}}}</script><style scoped>button{padding: 20px;color: #555;}.Color{background-color: #ffd700;color: #fff;}</style>
以上就是本人所分享的内容啦（虽然有点简单(●ˇ∀ˇ●)，但是肯定有些小萌新的），若有什么不对的地方还请各位大佬多多指正喔(づ￣ 3￣)づ
