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

不会有人真的学前端吧

于 2021-08-25 11:01:02 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/fun_kunkun/article/details/119906231

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

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

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做判断用，默认选中第一个