【Vue】实现动态绑定多个不同的类名

最新推荐文章于 2025-06-11 19:50:48 发布

卿卿qing

最新推荐文章于 2025-06-11 19:50:48 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue JaveScript 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43900414/article/details/125574656

Vue 同时被 3 个专栏收录

114 篇文章

订阅专栏

JaveScript

88 篇文章

订阅专栏

前端

76 篇文章

订阅专栏

本文介绍了Vue中使用动态样式的方法，包括通过三元运算表达式设置类名、使用Boolean值进行类名判断以及在复杂状态判断下使用数组形式设置多个类名。并通过一个实例展示了如何根据不同的状态值为元素绑定不同类名，并显示对应的文字描述。

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

1、三元运算表达式

:class=" show === true ? 'style1' : 'style2' "

2、多个类名，使用Boolean值来判断类名是否生效

:class="{ style1: true, style2: 2>1 }"

3、判断状态类型多的情况下，建议使用数组

:class="[style1, { style2: true }, { style3: false }] "

实例：

<template #default="scope">
  <span
    class="order_status-sty block"
    :class="[
      {
        'order_status-done': scope.row.status === '4'
      },
      {
        'order_status-cancel': scope.row.status === '-1'
      },
      {
        'order_status-in-progress': scope.row.status === '3' || scope.row.status === '1'
      },
      {
        applied: scope.row.status === '0'
      },
      {
        rejected: scope.row.status === '2'
      },
      {
        order: scope.row.status === '5'
      }
    ]"
    >{{
      scope.row.status === "0"
        ? "已申请"
        : scope.row.status === "-1"
        ? "已取消"
        : scope.row.status === "1"
        ? "已审批"
        : scope.row.status === "2"
        ? "已拒绝"
        : scope.row.status === "3"
        ? "已交付"
        : scope.row.status === "4"
        ? "已归还"
        : scope.row.status === "5"
        ? "已预约"
        : "--"
    }}</span
  >
</template>