vue3+ts切换选中效果

最新推荐文章于 2024-10-09 10:13:02 发布

渐绾

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量104

点赞数 2

文章标签： vue.js 前端 javascript vue

本文链接：https://blog.csdn.net/weixin_57792130/article/details/138314106

版权

<div style="display: flex;cursor: pointer;">
  <div :class="[violationActive === index?'violationActive':'']" class="tabs"
       v-for="(item,index) in violationData"
       :key="item.name"
       @click="violation(item,index)">
    {{ item.name }}
  </div>
</div>


const violationTime = ref('')
const violationData = reactive([
  {
    name: "今日",
  },
  {
    name: "本周",
  }
])
const violationActive = ref(0)
const violation = (item: any, index: number) => {
  violationActive.value = index
}


//选中文字颜色
.violationActive {
  color: #128fe9;
}