点击哪个div给哪个添加类名,类名静态和动态一起使用的时候,用外部用数组包裹,里面静态class使用引号,并且用逗号隔开,动态class直接写

  <div class="flex-row product-list">
        <div
          :class="[
            'div-btn',
            'flex-row',
            isActive === item.value ? 'bg-color' : '',
          ]"
          v-for="item in divBtn"
          :key="item.id"
          @click="onclick(item)"
        >
          {{ item.title }}
        </div>
      </div>


const isActive = ref(1);


const divBtn = reactive([
  {
    id: 1,
    title: "项目管理",
    value: 1,
  },
  {
    id: 2,
    title: "服务管理",
    value: 2,
  },
]);


const onclick = (item) => {
  // console.log('点击了' + item.title);
  isActive.value = item.value;
  if (item.title === "项目管理") {
    console.log("显示项目管理内容");
    score.value = 99;
  } else {
    score.value = 999;
    console.log("显示服务管理内容");
  }
};




.bg-color {
  background-color: green;
  color: white;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值