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

div id="app" :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.

CodePudding user response：

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" ></div>
<div v-else-if="temp > 3 and <= 10" ></div>
<div v-else ></div>

CodePudding user response：

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 :>
    Weather
  </div>
</div>