SoFunction
Updated on 2025-02-28

Vuejs implements method to dynamically change css styles for tag tabs

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!