使用道具改变班级的高度答案

【问题标题】：use props to change height of class使用道具改变班级的高度
【发布时间】：2022-06-16 00:12:46
【问题描述】：

我与Vue 3 和Bootstrap 5 合作。我有一个名为 number 的 props（给我从 1 到 10 的整数）。

现在我想在我的scrollbar-class 中使用我的number。

我尝试了以下方法，但它不起作用。我没有收到任何错误 - 它根本不起作用。

我该如何解决这个问题？谢谢！

<template>
  <div class="scrollbar"
  </div>
</template>

<script>
  export default {
    props: {
      number: Number,
    }
  }
</script>

<style>
  .scrollbar {
    height: calc(500px + (var(--number) * 20 px));
  }
</style>

【问题讨论】：

var(--number) 是css custom property，不受当前示例中的 JS 影响。
但是我如何使用我的prop - 我实际上无法弄清楚..
vuejs.org/guide/components/props.html#props

标签： javascript css vue.js vuejs3 bootstrap-5

【解决方案1】：

您可以在<style> 标签中使用v-bind 将数据属性绑定到您的CSS。

<template>
  <div class="scrollbar">
  </div>
</template>

<script>
  export default {
    props: {
      number: Number,
    }
  }
</script>

<style>
  .scrollbar {
    height: calc(500px + (v-bind(number) * 20px));
  }
</style>

Demo

【讨论】：