vue中,如何根据一个number值的大小来给定颜色。

我现在有一组数据,是通过v-for循环出来的,在这一组数据中,有个数据需要大于零的时候给红色,低于零的时候给绿色。具体实现代码有哪些方式啊?
我想写在循环体内,绑定样式做判断,但不知道怎么实现。

阅读 6.3k
评论
    4 个回答
    // template
    <div v-for="item in list" :style="'color:'+(item.value>0?'red':'green')+';'">{{item.name}}</div>
    
    // js
    data () {
        return {
            list: [{
                name: 1,
                value: 1
            }, {
                name: 2,
                value: -1
            }, {
                name: 3,
                value: 3
            }]
        }
    }

    Update:
    点击的时候更改背景颜色

    // template
    <div v-for="(item, index) in list" <!-- vue1.0 item和index换下位置 -->
          @click="clickHandler(index)"
          :class="{active: index === activeIndex}"
          :style="'color:'+(item.value>0?'red':'green')+';'">{{item.name}}</div>
    
    // js
    data () {
        return {
            list: [{
                name: 1,
                value: 1
            }, {
                name: 2,
                value: -1
            }, {
                name: 3,
                value: 3
            }],
            activeIndex: -1
        }
    },
    
    methods: {
        clickHandler (index) {
            this.activeIndex = index
        }
    }
    
    // css
    .active {
      background-color: yellow;
    }

      把样式弄成动态的就行

        换class名吧
        :class='[item.value>0?"green":"red"]'
          • 4.5k
            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章