Vue -- 点击按钮组中各按钮，按钮颜色根据含义变换颜色 & class 如何根据变量值选择不同样式

最新推荐文章于 2024-01-18 18:27:49 发布

仁王_雅治

最新推荐文章于 2024-01-18 18:27:49 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_38645718/article/details/121711194

本文探讨了在Vue.js中如何实现点击按钮组时，根据按钮的功能改变其颜色。同时讲解了如何根据变量值动态地为元素应用不同的CSS类，以实现样式切换。

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

<template>
  <div class="first-app">
    <el-button-group>
      <el-button size="mini" @click="setAlertSeverity('')" :class="currentSeverity==''?'activeBtn':'normalBtn'">全部</el-button>
      <el-button size="mini" @click="setAlertSeverity('Critical')" :class="currentSeverity=='Critical'?'dangerBtn':'normalBtn'">紧急</el-button>
      <el-button size="mini" @cl