[Vuejs]-How can I write code to div class in my weather app in VUE?

by

0👍

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>

0👍

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>

Leave a comment