能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松的自定义不同场景下不同样式。
对象形式
//html
<div :class="{'active':isActive}"></div>
//或者
<div :class="{'active':isActive, 'active2':isActive2}"></div>
类名
active
依赖于数据isActive
,当其为true
时候,div
会拥有类名active
;为false
时则不再拥有active
类名。
判断是否绑定一个active
//html
<div :class="{'active':isActive==-1}"></div>
//或者
<div :class="{'active':isActive==index}"></div>
类名
active
依赖于数据isActive
,当其为 -1或==index的时候,div
会拥有类名active
;否则不再拥有active
类名。
对象形式(绑定并判断多个)
//第一种(用逗号隔开)
<div :class="{ 'active': isActive, 'sort': isSort }"></div>
类名
active
依赖于数据isActive
,当其为true
时候,div
会拥有类名active
;为false
时则不再拥有active
类名,类名 sort 同逻辑。
//第二种(放在data里面)
//这种方法用于已确定使用的样式,但是现在某种样式不显示或显示
<div :class="classObject"></div>
data() {
return {
classObject:{ active: true, sort:false }
}
}
//语法
对象名:{
样式1:true|false,
样式2:true|false
}
类名
active
,当其为true
时候,div
会拥有类名active
;为false
时则不再拥有active
类名,类名 sort 同逻辑。
使用计算属性来简化类
第三种(使用computed属性)
<div :class="classObject"></div>
data() {
return {
isActive: true,
isSort: false
}
},
computed: {
classObject() {
return {
active: this.isActive,
sort:this.isSort
}
}
}
类名
active
,当其为true
时候,div
会拥有类名active
;为false
时则不再拥有active
类名,类名 sort 同逻辑。
第四种(使用computed属性,根据已知条件添加class)
<div :class="classObject(index)"></div>
computed: {
classObject() {
return function(index){
return index === 0 ? 'active' : 'sort'
}
}
}
类名
active
依赖于数据传入的 index,当其为 0 时候,div
会拥有类名active
;否则拥有 sort 类名。
数组形式
//单纯数组 绑定data对象
<div :class="[isActive,isSort]"></div>
data() {
return{
isActive:'active',
isSort:'sort'
}
}
数组与三元运算符结合判断选择需要的class
// 前后都可以加静态css类名
<div :class="['sort',isActive ? 'active' : '' ,'sort2' ]"></div>
//或者
<div :class="[isActive?'active':'']"></div>
//或者
<div :class="[isActive==1?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'no-active']"></div>
注意:三元运算符后面的“:”两边的class需要加上单引号,否则不能正确渲染
数组对象结合动态判断
//前面这个active在对象里面可以不加单引号,后面这个sort要加单引号
<div :class="[{ active: isActive }, 'sort']"></div>
//或者
<div :class="[{ active: isActive==1 }, 'sort']"></div>
//或者
<div :class="[{ active: isActive==index }, 'sort']"></div>
三目运算符
<div :class="isActive ? 'active' : 'no-active'"></div>
//或者
<div :class="isActive === 1 ? 'active': 'no-active'"></div>
//或者
<div :class="isActive ? 'active' : ''"></div>