Tengo problemas para encontrar la mejor manera de usar la variable devuelta por las funciones vue en los estilos CSS en línea, en este caso, el estilo "ancho".
Tengo 2 variables que se devuelven a la plantilla que puedo usar con la sintaxis {{}}, pero no como un estilo CSS.
Esto funciona bien:
Total Staked {{ gems }}/{{ size }} ({{ Math.round((gems / size) * 100) }}%)Esto se ve así cuando se procesa: Total apostado 200/350 (57%)
Me gustaría poner ese porcentaje calculado (57%) en un estilo CSS en línea como este:
<div class="bg-black h-2 rounded-md text-white" style="width: 57%"></div>donde el ancho: 57% se rellena dinámicamente.
Estoy usando Vue 3 con Tailwind CSS
Aquí hay un Codepen: https://codepen.io/johnwinsor/pen/RwxvdZZ
¡Gracias!
Puede crear una propiedad calculada y vincular su estilo:
new Vue({ el: "#app", data() { return { gems: 300, size: 350 }; }, computed: { wid() { return Math.round((this.gems / this.size) * 100) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="app"> <div> <!-- Thermometer --> <div class="w-2/3 h-2 pl-5 pr-5 m-auto"> <div class="w-full h-2 mt-6 mb-2 bg-red-500 rounded-md"> <div class="bg-black h-2 rounded-md text-white" :style="`width: ${wid}%`"></div> </div> </div> <!-- Caption --> <div class="flex flex-wrap justify-center align-center pb-5"> <p class="text-red-600"> Total Staked {{ gems }}/{{ size }} ({{ wid }}%) </p> </div> </div> </div>