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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中显示不同颜色的行 [重复]

【英文标题】：How to display rows in Vue.js with different colors [duplicate]

【发布时间】：2020-07-24 16:22:14

【问题描述】：

我不是前端开发人员，所以 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'
            
        
    
 

【问题讨论】：

这能回答你的问题吗？ How do I make a striped table in vuetify v-data-table? 使用 ul li:nth-of-type(odd) background-color: rgba(0, 0, 0, .05);

【参考方案1】：

改变

:style="backgroundColor: color"

到

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

和

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

试试看。它应该解决它。