---
description: "classnames classnames 类名处理：组件可通过状态或者属性动态控制标签的类名增加删除"
category: general-tools
keywords: ["classnames", "类名处理", "字符串", "base64", "复制", "校验", "MD5", "模块映射", "版本"]
source: "https://www.e-cology.com.cn/utils/classnames/freepass"
---

# classnames classnames 类名处理

## 适用场景

组件可通过状态或者属性动态控制标签的类名增加删除

## 能力说明

一个简单的实用工具，用于有条件地将 classNames 连接在一起

## 检索符号

- `classnames`

## 代表示例

```js
import { classnames } from '@weapp/utils';

const cls1 = classnames('foo', 'bar'); // => 'foo bar'
console.log(cls1);
const cls2 = classnames('foo', { bar: true }); // => 'foo bar'
console.log(cls2);
const cls3 = classnames({ 'foo-bar': true }); // => 'foo-bar'
console.log(cls3);
const cls4 = classnames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
console.log(cls4);
const cls5 = classnames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
console.log(cls5);
```

## 深入阅读
- [在线免登文档](https://www.e-cology.com.cn/utils/classnames/freepass)

> 本卡用于快速选型。参数、返回值、限制和完整示例以原始文档为准。
