div id="app" :class="typeof weather.main != "indefinido" &&aned &&an.main.temp > 16 ? 'warm' : ''">
Hola, tengo un problema, me gustaría saber cómo se escribe el código cuando quiero div que si la temperatura es de 5 a 15, mostraré una clase llamada primavera, clase 16+ con el nombre cálido y temperatura por debajo de 0 llamado invierno. Tengo un código arriba con una temperatura de 16+. Gracias por sus respuestas y ayuda.
Si trabaja con Vue.js, prefiero optar por la representación condicional. Echa un vistazo aquí: https://v2.vuejs.org/v2/guide/conditional.html .
Eso es algo como esto:
<div v-if="temp > 0 && temp <= 3" class="winter"></div> <div v-else-if="temp > 3 and <= 10" class="warm"></div> <div v-else class="hot"></div>Puede usar :class para vincular los estilos dinámicamente.
Demostración de trabajo:
new Vue({ el: '#app', data: { temp: 10 } }); .winter { background-color: green; } .spring { background-color: yellow; } .warm { background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div :class="{ winter: `${temp}` < 0, warm: `${temp}` > 16, spring: (`${temp}` > 5) && (`${temp}` < 15) }"> Weather </div> </div>