任何职业都不简单,如果只是一般地完成任务当然不太困难,但要真正事业有所成就,给社会做出贡献,就不是那么容易的,所以,搞各行各业都需要树雄心大志,有了志气,才会随时提高标准来要求自己。 —— 谢觉哉

我们可以在包含vue-loadervue项目中如下写法

1
2
3
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]"></div>
<!-- 简写 -->
<div :class="{ active, [`${prefix}-button`]: isButton }"></div>

这里三个值:

1
2
3
4
5
6
7
8
9
10
export default {
data() {
return {
active: true,
isButton: true,
prefix: 'ruben'
};
}
};
</script>

渲染结果:

image-20210928051743080

这里第一个缩写是变量结构,将{ active: active }缩写为active

第二个缩写为模板字符串,将prefix直接渲染到字符串中

第三个缩写就是isButton的缩写,当isButtontrue的时候

1
[`${prefix}-button`]

才会生效

甚至我们还可以这么写:

1
<div :class="[{ button: isButton }, { circle: isCircle }]"></div>

如果isButton或者isCircle任何一个为true,对应的class才会加上对应的值

image-20210928052911043