任何职业都不简单,如果只是一般地完成任务当然不太困难,但要真正事业有所成就,给社会做出贡献,就不是那么容易的,所以,搞各行各业都需要树雄心大志,有了志气,才会随时提高标准来要求自己。 —— 谢觉哉
我们可以在包含vue-loader
的vue
项目中如下写法
1 | <div :class="[{ active: active }, isButton ? prefix + '-button' : null]"></div> |
这里三个值:
1 | export default { |
渲染结果:
这里第一个缩写是变量结构,将{ active: active }
缩写为active
第二个缩写为模板字符串,将prefix
直接渲染到字符串中
第三个缩写就是isButton
的缩写,当isButton
为true
的时候
1 | [`${prefix}-button`] |
才会生效
甚至我们还可以这么写:
1 | <div :class="[{ button: isButton }, { circle: isCircle }]"></div> |
如果isButton
或者isCircle
任何一个为true
,对应的class
才会加上对应的值