div id="app" :class="typeof weather.main != "undefined" &&aned &&an.main.temp > 16 ? 'warm' : ''">
Hi, I have a problem, I would like to know how the code is written when I want to div that if the temperature from 5 to 15, I will show a class called spring , 16+ class with the name warm and temperature below 0 called winter. I have a code above with a temperature of 16+. Thank you for your answers and help.
If you work with Vue.js, i'd rather go for the conditional rendering. Take a look here: https://v2.vuejs.org/v2/guide/conditional.html.
Thats something like this:
<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>
You can use :class to bind the styles dynamically.
Working Demo :
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>