如何在 Vue.js 中显示不同颜色的行 [重复]

Question

我不是前端开发人员，所以 Vue 和 JS 对我来说是新的。我正在编写管理销售的应用程序。

在其中一个组件中，我想将发票显示为列表。为了更好地查看这些行，我提出了将一行设置为白色、下一个灰色、下一个白色、下一个灰色等等的想法。

这是我的问题：如何在 Vue 中做到这一点？

我尝试了类似的方法，但它不起作用（我只是删除了 li 项目，因为这些对那个例子没有用）：

<li v-for="fruit in fruits" v-bind:key="fruit.id" :style="{backgroundColor: color}" v-bind="counter++"> 
</li>

这是我的 Vue 实例：

export default {
    data() {
        return {
            color: '',
            counter: 0,
            fruits: ["Lorem isum", "Lorem isum", "Lorem isum", "Lorem isum"]

        }
    }, methods: {
        choseColor() {
            if (this.counter % 2 !== 0 ) {
                color = 'grey'
            } else {
                color = 'white'
            }
        }
    }
} 

Answer 1

改变

:style="{backgroundColor: color}"

到

:style="'background: ' + choseColor()'"

和

choseColor() {
            return ((this.counter % 2) !== 0) ? `grey` : 'white';
}

试试看。它应该解决它。