记录一个vue 处理样式的小技巧:
直接上代码:
如下:
<template>
<div>
vue样式中使用props接收的参数:
<div class="box" :style="styleData"></div>
</div>
</template>
<script>
export default {
props: {
height: {
type: Number,
default: 54,
},
},
computed: {
styleData() {
return {
"--box-height": this.height + "px",
};
},
},
};
</script>
<style scoped>
.box {
height: var(--box-height);
}
</style>