<view class="filter_line">
<view class="filet_text">
<view v-for="(item,index) in filterList" :key="index"
:class="item.order == previous[0].order? 'activation':'' "
@click="changeSlectColor(item.order,item.color)">{{item.filterName}}
</view>
</view>
css
.activation{
color: rgb(255, 0, 0);
}
data
previous: [{
filterName: '全部',
color: "#AD343E",
order: 1,
}],
filterList: [{
filterName: '全部',
color: "#AD343E",
order: 1,
},
{
filterName: '排行版',
color: "#AD343E",
order: 2,
},
{
filterName: '流行',
color: "#AD343E",
order: 3,
}, {
filterName: '明谣',
color: "#AD343E",
order: 4,
}, {
filterName: '电子',
color: "#AD343E",
order: 5,
}, {
filterName: '舞曲',
color: "#AD343E",
order: 6,
},
{
filterName: '轻音乐',
color: "#AD343E",
order: 7,
},
]
};
方法
changeSlectColor(order, color) {
this.previous = this.filterList.filter(item => {
return item.order == order
})
},