as shown in the figure, this is the weather navigation bar on the home page of Baidu. Now I use vue to do
. There is a demand for air pollution degree and numerical value. The air pollution value is the incoming data, such as 500,400. The air pollution degree is not the imported data, but is judged according to the incoming value. At which stage, the air pollution degree is displayed. For example, the air pollution index 500-600 is serious, the air pollution index 400-500 is severe, and the colors are different in different degrees
the code is as follows
template
<template>
<div
class="topnav_left_div">
<span>
{{ location }}
</span>
<img
:src="weatherImgUrl">
<span>
{{ temperature }}
</span>
<span
class="topnav_text">
{{ airquality.degree }}
</span>
<span>
{{ airquality.degreecount }}
</span>
<span>|</span>
</div>
</template>js
export default{
data() {
return {
location: "",
weatherImgUrl: require("@/assets/sun.png"),
temperature: "20",
airquality: {
degree: "",
degreecount: "500"
}
}
}
}above is the previous code, which needs to be improved. How can I improve it?