vue 点击切换变色 tab 改变class 跳转链接
vue 点击切换变色 tab 改变class1.{{item.name}}2.data(){return {footlist: [{name: '首页',path: '/
·
vue 点击切换变色 tab 改变class
1.
<section id='foot_guide'>
<div v-for="(item,index) in footlist" :key="index" @click="gotoAddress({path:item.path},index)" class="guide_item" :class="{active: activeIndex == index}">
<svg class="icon" aria-hidden="true">
<use v-bind:xlink:href="item.svg"></use>
</svg>
<div>{{item.name}}</div>
</div>
</section>
2.
data(){
return {
footlist: [
{
name: '首页',
path: '/msite',
svg: '#icon-shouye2'
},
{
name: '个人中心',
path: '/profile',
svg: '#icon-user'
}
],
activeIndex: 0,
}
},
methods: {
gotoAddress(path, index){
this.$router.push(path);
this.activeIndex = index
}
},
3.
.active div {
color: #FFBC00;
}
.active svg use {
fill: #FFBC00;
}
更多推荐
已为社区贡献5条内容
所有评论(0)