html
<ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}">{{}}</a></li> </ul>
js
var app = new Vue({ el:"#app", router, data:{ m:"hello ", active:'2', idx:'0', //The home page is selected by default headerList:[ {name:'Home 1'}, {name:'Home 2'}, {name:'Home 3'}, {name:'Home 4'}, {name:'Home 5'}, {name:'Home 6'} ] }, methods:{ // 1. Select selectMainTheme:function(index){ ("selectMainTheme" + index); ("idx" + ); = index; } // } });
Summarize
The above is the Vuejs implementation tag tab dynamically changes the css style. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!