Trabajo con Vue 3 y Bootstrap 5 . Tengo un props llamado number (consígueme números enteros del 1 al 10).
Ahora quiero trabajar con mi number en mi clase de scrollbar de desplazamiento.
Lo he intentado de la siguiente manera, pero no funciona. No recibo ningún error, simplemente no funciona.
¿Cómo puedo arreglar eso? ¡Gracias!
<template> <div class="scrollbar" </div> </template> <script> export default { props: { number: Number, } } </script> <style> .scrollbar { height: calc(500px + (var(--number) * 20 px)); } </style>Puede usar v-bind en su etiqueta <style> para vincular una propiedad de datos a su CSS.
También se actualizará reactivamente, si cambia su estado.
<template> <div class="scrollbar"> </div> </template> <script> export default { props: { number: Number, } } </script> <style> .scrollbar { height: calc(500px + (v-bind(number) * 20px)); } </style>