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 就好了：{&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; airqualityDegree(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.degreecount < 100){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'green',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: '很好'&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (this.degreecount >= 100 && this.degreecount < 200){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ... 类推&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 2

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

Answer 3

绑定class类名，分别做判断