In vue, how to give a color according to the size of a number value.

I now have a set of data that is looped through v-for, in which a data is given red when it needs to be greater than zero and green when it is below zero. What are the ways to implement the code?
I want to write it in the loop body and make a judgment about the binding style, but I don"t know how to implement it.

Number vue-cli vue.js

Mar.10,2021

// 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:
change the background color when you click

// template
<div v-for="(item, index) in list" <!-- vue1.0 itemindex -->
      @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;
}

just make the style dynamic

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

official document: ide/class-and-style.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

Previous: Koa-router path parameter, what to do in this case?

Next: Ladies and gentlemen, can you explain the meaning of the bold part below?