Vue循环列表点击添加类样式

最新推荐文章于 2024-09-19 08:03:36 发布

原创最新推荐文章于 2024-09-19 08:03:36 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#class

VUE 同时被 2 个专栏收录

116 篇文章

订阅专栏

CSS样式

25 篇文章

订阅专栏

本文展示了一个使用Vue.js框架的周期切换示例，通过点击不同的时间周期标签（一天、三天、一周），可以改变显示的数据范围。代码中包含了HTML结构、Vue数据绑定以及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<div class="newBtn">
          <span
                  @click="dayClick(index)"
                  v-for="(item,index) in dayTab"
                  :class="[idx === index ? 'active' : '']"
          >{{item}}</span>
        </div>

data:function(){
	dayTab: ["一天","三天","一周"],
    idx: 0,
}
methods: {
      dayClick(index){
        console.log(index);
        this.idx = index;
      },
}

 .newBtn{
    margin-bottom: 20px;
    cursor: pointer;
    span{ display: inline-block; font-size: 16px;}
    span:after{ content: "|"; padding: 20px; color: #888;}
    span:last-child:after{ content: ""; padding: 20px; color: #888;}
    .active{ color: $mainTxtColor;}
  }