Vue点击改变属性(改变文字颜色)
<template> <div class="tab-control"> <div v-for="(item , index) in title" class="tab-control-item" :class="{active: index === currentIndex}" @click='itemClick(index)'> <span>{{item}}</span> </div> </div> </template> <script> export default { name: 'TabControl', data:{ title:["新款" , "流行" , "推荐"] } } }, data(){ return{ currentIndex: 0 } }, methods: { itemClick(index){ this.currentIndex = index; this.$emit('tabClick', index) } }, } </script> <style scoped> .tab-control{ display: flex; text-align: center; font-size: 15px; height: 40px; line-height: 40px; background-color: #fff; } .tab-control-item{ flex:1; } .tab-control-item span{ padding: 5px; } .active{ color: deeppink } .active span{ border-bottom: 3px solid deeppink; } .tab-control{ position: sticky; top: 44px } </style>
人生苦短,慢慢潇洒。
nsyw.run
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步