// 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; }
Update:
点击的时候更改背景颜色
把样式弄成动态的就行
官方文档:https://cn.vuejs.org/v2/guide...