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>jsexport 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

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

Answer 3

绑定class类名，分别做判断