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, active
Class]">hello</p>，这样就会将message和active
Class这两个变量的值作为类名添加到元素上。
需要注意的是，数组语法在开发
中并不
常用，因为它不太方便控制
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 ]
9769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
