vue3动态绑定class

1.动态拼接class类名

<span v-for="(locationStatus, index) in BASIC_LOCATION_STATUS" :key="index">
	<div :class="[`left block_size color_` + locationStatus.value]"></div>
</span>

通过上面的拼接，动态实现下方的class样式,拼接时用到的``也可以换成''

.color_010 {
	background-color: #f1f3f2;
	border: 1px solid #f1f3f2;
}
.color_020 {
	background-color: #ffff00;
	border: 1px solid #ffff00;
}
.color_050 {
	background-color: #00ff00;
	border: 1px solid #00ff00;
}
.color_060 {
	background-color: #ff0000;
	border: 1px solid #ff0000;
}
.color_090 {
	background-color: #8a2be2;
	border: 1px solid #8a2be2;
}

2.三元表达式绑定class类

:class="[props.spaceId != '' ? 'choose-sku-button-color-able' : 'choose-sku-button-color-unable']"