Dynamically set the style of css in vue

Foreword:

In actual development, we often encounter situations where we need to dynamically change the CSS style. For example, a simple problem I encountered during practice today is to dynamically modify the selected font color after switching the tab, and it is not made into a control. Just use the a tag.

 Click account login:

 

 Click to scan the code to log in:

The method of dynamically changing tab font color:

The main part of 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>

The script involves parts: 

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

Main parts of style:

  .current {
    color: #ff6700;
  }

Ideas: 

A variable isShowAccountLogin is set to determine which is selected, so as to control the displayed content and display font color, is it very simple.