Vue3中如何通过props值动态修改.scrollbar类的height样式

你的代码不生效是几个语法和逻辑问题叠加导致的：

• 没有打通JS和CSS的变量传递：你在样式中用var(--number)取值，但从未把props里的number赋值给这个CSS自定义属性，样式层拿不到任何有效值
• CSS计算属性语法错误：calc()里的20 px在数值和单位间多了空格，CSS会直接判定这条样式规则无效，不会渲染
• 模板标签书写不完整：.scrollbar的开标签没写完就直接接闭合标签，不符合模板语法规范
• 缺少props兜底逻辑：没有给number设置默认值，父组件漏传值时会出现计算异常

直接在元素上通过动态行内样式把props值绑定为CSS自定义属性，同时修正所有语法错误即可：

<template>
  <div 
    class="scrollbar"
    :style="{ '--number': number }"
  ></div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      default: 1,
      // 匹配1-10整数的传值要求做校验
      validator: val => Number.isInteger(val) && val >= 1 && val <= 10
    }
  }
}
</script>

<style>
.scrollbar {
  /* 修正calc语法，去掉20和px之间的空格 */
  height: calc(500px + var(--number) * 20px);
}
</style>

更简洁的可选写法 #

如果不需要复用CSS变量，可以直接在动态style里计算最终高度，完全不用单独写CSS变量规则：

<template>
  <div 
    class="scrollbar"
    :style="{ height: `${500 + number * 20}px` }"
  ></div>
</template>

内容的提问来源于stack exchange，提问作者user16365685