vue根据输入的数据进行判断

Question

如图所示，这是百度首页的天气导航栏，现在我用vue来做
有一个需求，空气污染程度和数值部分，空气污染数值是传入的数据，比如500或400等，空气污染程度不是传入的数据，而是根据传入的数值进行判断，在哪个阶段就显示空气污染程度，比如空气污染指数500-600为严重、空气污染指数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: '严重',
                    degreecount: '500'
                }
            }
        }
    }

上面是以前的代码，需要改进，请问大神如何改进？

Answer 1

写一个 computed 就好了：

{
    computed: {
        airqualityDegree(){
            if (this.degreecount < 100){
                return {
                  color: 'green',
                  text: '很好'  
                 }
            } else if (this.degreecount >= 100 && this.degreecount < 200){
                ... 类推
            }
        }
    }
}

Answer 2

考虑用计算属性绑定到class 或者 style上面。
参考链接https://cn.vuejs.org/v2/guide... 的实现，如果还有不明白的可以问我， 不过非常建议你读完这一章节的类容。

Answer 3

你所注重的就是污染成都的判断，你可以写一个公共方法，把你的当然数据传递进去，在方法里做所有可能的判断

Answer 4

绑定class类名，分别做判断