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.
// 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?