vue实现点击某个标签变换颜色
1、v-for循环出多个标签,点击不同元素,css样式随之点中发生改变
for循环出多个元素代码:
class="paixu-view"> for="(item, index) in sortlist" :key="index"> "clickPaixu(index)"> class="num===index? 'activetext':'' ">{{item.name}}
2、js中初始化sortlist循环对象的数据,与点击方法clickPaixu():
export default{ data() { return { sortlist:[ { name: "综合排序", screen: "_id", nums: "1" }, { name: "起送价最低", screen: "_id", nums: "2" }, { name: "配送价最低", screen: "_id", nums: "3" }, { name: "人均高到低", screen: "_id", nums: "4" }, { name: "人均低到高", screen: "_id", nums: "5" }, ], num: 0, } }, methods:{ clickPaixu(index){ console.log("点击:" + index) this.num = index; } } }
3、点击后显示的css样式(选中变色):
.activetext{
color: #FBAE22;
}
最终效果:
。