单文件组件 CSS 功能
# 单文件组件 CSS 功能
# CSS 中的 v-bind()
组件状态驱动的动态 CSS 值
自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。
<template>
...
<el-avatar
:size="logoHeight"
...
</template>
<script setup>
...
const logoHeight = 44
</script>
<style lang="scss" scoped>
.logo-container {
height: v-bind(logoHeight) + 'px';
...
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
上次更新: 2025/06/23, 07:26:12