1:html:
<ul>
<li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)">
<router-link :to="item.path" :class="{ 'active-class': nowIndex === index }">
<img :src="item.icon" alt="">
<span>{{item.text}}</span>
</router-link>
</li>
</ul>
2:js:
export default {
name: 'Partice',
data () {
return {
icon_list:[
{
icon: require('@/assets/check_in/有预订icon.png'),
text: '有预订',
type: 'ui-picture',
path:'/check_in/check_in_home'
},
{
icon: require('../../assets/check_in/无预订icon.png'),
text: '无预定',
type: 'ui-picture',
path:''
},
{
icon: require('@/assets/check_in/团队icon.png'),
text: '团队',
type: 'ui-picture',
path:''
},
{
icon: require('@/assets/check_in/会员icon.png'),
text: '会员',
type: 'ui-picture',
path:''
},
{
icon: require('@/assets/check_in/协议icon.png'),
text: '协议',
type: 'ui-picture',
path:''
},
{
icon: require('@/assets/check_in/拼房icon.png'),
text: '拼房',
type: 'ui-picture',
path:''
}
],
nowIndex: 0,
}
},
methods: {
changeClass (index) {
this.nowIndex = index
}
}
}
3:css:
.active-class {
span{
color: #007BDB;
}