使用props来改变类的高度

Question

我与Vue 3和Bootstrap 5一起工作。我有一个props称为number(从1 - 10给我整数)。

现在我想与我的number在我的scrollbar类工作。

我试过如下，但它不工作。我没有得到任何错误-它只是不工作。

我怎样才能解决这个问题?谢谢你！

<template>
<div class="scrollbar"
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>

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

Answer 1

你可以在你的<style>标签中使用v-bind来绑定一个data属性到你的CSS。

如果你的状态改变了，它也会反应更新。

<template>
<div class="scrollbar">
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>
<style>
.scrollbar {
height: calc(500px + (v-bind(number) * 20px));
}
</style>

演示