directives

export default{
    bind(el, binding){
        console.log(binding);
        let {classActive, tabClass,index} = binding.value;
        el.classActive = classActive;
        el.tabClass = tabClass;
        el.oTabItems = el.getElementsByClassName(tabClass);
        el.oTabItems[index].className = `${tabClass} ${classActive}`;
    },
    update(el, binding){
        console.log(binding);
        const index = binding.value.index,
        oldIndex = binding.oldValue.index,
        {tabClass, classActive, oTabItems} = el;
        oTabItems[oldIndex].className = tabClass;
        oTabItems[index].className = `${tabClass} ${classActive}`; 
    }
}


 <div class="header-box" v-test="{classActive:'active',tabClass: 'a',index}">
        <a class="a" href="javascript:;" @click="onTest(0)">table1</a>
        <a class="a"  href="javascript:;" @click="onTest(1)">table2</a>
      </div>
      <div class="content">
        {{ index }}
      </div>
    </div>
  </template>
  
  <script>
  import Test from "@/directives/test"