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

Question

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

Answer 1

// 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;
}

Answer 2

把样式弄成动态的就行

Answer 3

换class名吧
:class='[item.value>0?"green":"red"]'

Answer 4

官方文档：https://cn.vuejs.org/v2/guide...