'How can I write code to div class in my weather app in VUE?

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.

javascripthtmlvue.js


Solution 1:[1]

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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pbo
Solution 2 Rohìt Jíndal

Related Questions