鍍金池/ 問(wèn)答/HTML/ vue根據(jù)輸入的數(shù)據(jù)進(jìn)行判斷

vue根據(jù)輸入的數(shù)據(jù)進(jìn)行判斷

如圖所示，這是百度首頁(yè)的天氣導(dǎo)航欄，現(xiàn)在我用vue來(lái)做
有一個(gè)需求，空氣污染程度和數(shù)值部分，空氣污染數(shù)值是傳入的數(shù)據(jù)，比如500或400等，空氣污染程度不是傳入的數(shù)據(jù)，而是根據(jù)傳入的數(shù)值進(jìn)行判斷，在哪個(gè)階段就顯示空氣污染程度，比如空氣污染指數(shù)500-600為嚴(yán)重、空氣污染指數(shù)400-500為重度，而且不同程度的顏色不一樣

圖片描述

代碼如下

模板

<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: '嚴(yán)重',
                    degreecount: '500'
                }
            }
        }
    }

上面是以前的代碼，需要改進(jìn)，請(qǐng)問(wèn)大神如何改進(jìn)？

回答
編輯回答
貓小柒

你所注重的就是污染成都的判斷，你可以寫一個(gè)公共方法，把你的當(dāng)然數(shù)據(jù)傳遞進(jìn)去，在方法里做所有可能的判斷

2017年11月20日 17:17
編輯回答
只愛你

寫一個(gè) computed 就好了：

{
    computed: {
        airqualityDegree(){
            if (this.degreecount < 100){
                return {
                  color: 'green',
                  text: '很好'  
                 }
            } else if (this.degreecount >= 100 && this.degreecount < 200){
                ... 類推
            }
        }
    }
}
2017年8月16日 03:43
編輯回答
呆萌傻

綁定class類名，分別做判斷

2018年6月5日 21:56
編輯回答
不歸路

考慮用計(jì)算屬性綁定到class 或者 style上面。
參考鏈接https://cn.vuejs.org/v2/guide... 的實(shí)現(xiàn)，如果還有不明白的可以問(wèn)我， 不過(guò)非常建議你讀完這一章節(jié)的類容。

2018年8月22日 01:18