vue中动态设置css的样式

前言：

在实际开发时，经常会遇到需要动态更换css样式的情况，比如今天自己在练习时遇到的一个简单的小问题，就是切换tab后动态的修改选中后的字体颜色，没有做成控件，就用a标签做的。

 点击帐号登录：

 点击扫码登录：

tab的字体颜色动态改变方法：

html的主要部分：

 <div class="nav-tabs">
      <a href="javascript:void(0);" @click="click_account_login" :class="{current: isShowAccountLogin }">帐号登录</a>
      <span class="line"></span>
      <a href="javascript:void(0);" @click="click_code_login" :class="{current: !isShowAccountLogin }">扫码登录</a>
 </div>

script涉及部分： 

export default {
  data () {
    return {
      isShowAccountLogin: true,
    }
  },
  methods: {
    click_account_login () {
      this.isShowAccountLogin = true;
    },
    click_code_login () {
      this.isShowAccountLogin = false;
    }
  }
}

style主要部分：

  .current {
    color: #ff6700;
  }

思路： 

设置了一个变量isShowAccountLogin来判断是选中了哪个，从而控制显示的内容及显示字体颜色，是不是很简单。