type
status
date
May 29, 2023 07:48 AM
slug
summary
tags
category
icon
password
日期
标签 2
状态
链接地址
Column
标签
BindClass的使用方式
一、对象语法
1、给v-bind:class 设置一个对象或方法(方法放回Boolean类型就可以)，可以动态地切换class，例如：
最终渲染结果：
<div class="active"></div>2、对象中可以设置多个属性，这些属性满足条件以后可以同时存在
最终渲染结果：
<div class="static active"></div>3、当:class的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用data或者computed，只要返回的是一个json对象就可以
最终渲染结果：
<div class="static"></div>二、数组语法
1、当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
最后渲染的结果：
<div class="active error"></div>2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）
渲染的结果为：
<div class="active error"></div>3、class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：
渲染的结果为：
<div class="active error"></div>4、与对象语法一样，也可以使用data、computed、method三种方法，以计算属性为例：
最后渲染结果：
<div class="btn btn-large btn-disabled"></div>三、在组件上使用
如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：
最终组件渲染后的结果为：
<p class="article active">一些文本</p>- 作者:kk
- 链接:https://blog.kinnnnnnnnnng.cn//article/a3bc956f-cb0e-4d43-9a81-60364574836a
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。