I work with Vue 3 and Bootstrap 5. I have a props called number (get me integers from 1 - 10).
Now I want to work with with my number in my scrollbar-class.
I've tried as following but it's not working. I get no error - it's simply not working.
How can I fix that? Thank You!
<template>
<div class="scrollbar"
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>
<style>
.scrollbar {
height: calc(500px + (var(--number) * 20 px));
}
</style>
You can use v-bind in your <style> tag to bind a data property to your CSS.
It will also reactivly update, if your state changes.
<template>
<div class="scrollbar">
</div>
</template>
<script>
export default {
props: {
number: Number,
}
}
</script>
<style>
.scrollbar {
height: calc(500px + (v-bind(number) * 20px));
}
</style>