vue3 ：class

Vue3中的:class指令用于动态地绑定CSS类。在Vue3中，有三种方式来使用:class指令。

第一种是直接绑定一个字符串，这个字符串可以是一个类名，也可以是多个类名组成的字符串，用空格隔开。例如，可以这样写：<div class="text" :class="'active text-bg'">第一种class绑定字符串形式</div>，这样就会给这个元素添加active和text-bg这两个类。

第二种是使用对象的形式来绑定class。可以通过在对象中设置键值对的方式来决定是否添加某个类名。例如：<div class="text" :class="{active: isActive, 'text-bg': !isActive}">第二种class绑定对象形式</div>，这样根据isActive的值来决定是否添加active类，如果isActive为真，则添加active类，否则添加text-bg类。

第三种是使用数组的形式来绑定class。可以将多个类名放在一个数组中。例如：<p :class="[message, activeClass]">hello</p>，这样就会将message和activeClass这两个变量的值作为类名添加到元素上。

需要注意的是，数组语法在开发中并不常用，因为它不太方便控制class。而使用对象的形式能更灵活地根据条件来动态绑定类名。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [VUE3 class 用法](https://blog.csdn.net/weixin_46730573/article/details/125832119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue3基础+代码语法+例子大全（三）——Class与Style绑定](https://blog.csdn.net/m0_46610349/article/details/126641434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]