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

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

|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs vue <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 | hljs vue export default { data() { return { active: true, isButton: true, prefix: 'ruben' }; } }; </script> |

渲染结果：

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

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

第三个缩写就是isButton的缩写，当isButton为true的时候

|-----------|--------------------------------------| | 1 | hljs vue [`${prefix}-button`] |

才会生效

甚至我们还可以这么写：

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

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