vue中属性简写
任何职业都不简单，如果只是一般地完成任务当然不太困难，但要真正事业有所成就，给社会做出贡献，就不是那么容易的，所以，搞各行各业都需要树雄心大志，有了志气，才会随时提高标准来要求自己。 —— 谢觉哉
我们可以在包含vue-loader的vue项目中如下写法
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]"></div>
<!-- 简写 -->
<div :class="{ active, [`${prefix}-button`]: isButton }"></div>这里三个值：
export default {
data() {
return {
active: true,
isButton: true,
prefix: 'ruben'
};
}
};
</script>渲染结果：
image-20210928051743080
这里第一个缩写是变量结构，将{ active: active }缩写为active
第二个缩写为模板字符串，将prefix直接渲染到字符串中
第三个缩写就是isButton的缩写，当isButton为true的时候
[`${prefix}-button`]才会生效
甚至我们还可以这么写：
<div :class="[{ button: isButton }, { circle: isCircle }]"></div>如果isButton或者isCircle任何一个为true，对应的class才会加上对应的值
image-20210928052911043
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读