Vue按钮选中其中一个样式改变，其他按钮样式相同

最新推荐文章于 2023-07-24 10:27:52 发布

原创最新推荐文章于 2023-07-24 10:27:52 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中实现单选按钮功能，当点击一个按钮时，该按钮样式改变，而其他按钮保持原始样式。通过HTML数据绑定、Vue实例的data属性和class样式结合JavaScript（methods）进行操作，最终达到预期效果。

HTML样式

<div class="goodsStatus">
          <div v-for="(item, index) in goodsStatusList" :key="index">
            <div :class="{
                    goodsStatusBtn1:goodsStatusIndex == index,
                    goodsStatusBtn:goodsStatusIndex != index} "         
                    @click="changeGoodsStatus(item,index)">
              <span>{{ item.name }}</span>
            </div>
          </div> 
</div>

data

goodsStatusList: [ //循环列表
        {
          name: "铺货成功",
        },
        {
          name: "审核待修改",
        },
        {
          name: "审核中",
        },
        {
          name: "已缺货",
        },
      ],
goodsStatusItem:"",//获取点击的元素名称
goodsStatusIndex:0//:class做判断用，默认选中第一个

class样式

.goodsStatus { //按钮水平
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-content: space-between;
}
.goodsStatusBtn {//白底按钮
  width: auto;
  font-size: 3.4667vw;
  height: 9.6vw;
  border: 0.2667vw solid #eff0f7;
  box-sizing: border-box;
  border-radius: 6.6667vw;
  margin: 0 1vw;
  line-height: 9.6vw;
  text-align: center;
  background: #fff;
  padding: 0 3vw;
}
.goodsStatusBtn1 {//红底按钮
  width: auto;
  font-size: 3.4667vw;
  height: 9.6vw;
  border: 0.2667vw solid #eff0f7;
  box-sizing: border-box;
  border-radius: 6.6667vw;
  margin: 0 1vw;
  line-height: 9.6vw;
  text-align: center;
  background: #FC3928; //唯一不同
  padding: 0 3vw;
}

js（methods）

changeGoodsStatus(item,index){
      this.goodsStatusItem=item.name;//获取点击的元素
      this.goodsStatusIndex = index;//将点击元素的下标和：class中的作对比
},

效果图

Vue按钮选中其中一个样式改变，其他按钮样式相同

1 条评论