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

三刀流海贼王
  • 237

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

回复
阅读 7.9k
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"]'
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏