阿超 > vue中属性简写

vue中属性简写

2021-09-27

前端

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

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

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的缩写，当isButton为true的时候

1
[`${prefix}-button`]

才会生效

甚至我们还可以这么写：

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

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

image-20210928052911043