Vue添加类名

在vue中给元素添加类名非常灵活,主要分为三种形式。

对象的形式

1
2
3
<template>
<div :class="{jd: true, jd2: false}"></div>
</template>

数组的形式

1
<div :class="['jd','jd2'}"></div>

注意数组中的类名需要加单引号,数组里也可以用对象,对象的键名如果是不带-的可以不加单引号。

1
<div :class="[{jd: true}, {'jd-2': true}, 'jd2'}"></div>

也可以在数组中使用三元表达式

1
2
3
4
5
<div :class="[
(item.jd === '增发预案' || item.jd === '已经实施') ? 'jd' :
(item.jd === '董事会预案' || item.jd === '审核通过') ? 'jd2' :
(item.jd === '增发失败') ? 'jd3' : 'jd4'
]">{{item.jd}}</div>

函数的形式

1
2
3
4
5
6
7
8
9
10
11
12
<template>
<div :class="getClass"></div>
</template>
<script>
export default {
method: {
setClass () {
return 'jd';
}
}
}
</script>