鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue中，如何根據(jù)一個number值的大小來給定顏色。

vue中，如何根據(jù)一個number值的大小來給定顏色。

我現(xiàn)在有一組數(shù)據(jù)，是通過v-for循環(huán)出來的，在這一組數(shù)據(jù)中，有個數(shù)據(jù)需要大于零的時候給紅色，低于零的時候給綠色。具體實現(xiàn)代碼有哪些方式??？
我想寫在循環(huán)體內(nèi)，綁定樣式做判斷，但不知道怎么實現(xiàn)。

回答
編輯回答
糖果果

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

2017年7月2日 15:11
編輯回答
做不到

把樣式弄成動態(tài)的就行

2017年4月3日 12:37
編輯回答
兮顏
// 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;
}
2018年1月14日 02:33
編輯回答
喜歡你
換class名吧
:class='[item.value>0?"green":"red"]'
2018年5月4日 21:46