Vue2使用v-bind:class绑定对象属性时CSS样式未按预期生效

问题原因与修复方案 #

1. 核心问题：数组属性赋值错误 #

你定义的invoices数组中所有条目都将isUnpaid设为false、isOpen全设为true，导致类绑定逻辑永远只会触发open类，unpaid类没有满足的生效条件。即使是status为unpaid的第二个条目，对应的属性也没有正确赋值。

2. v-for 渲染异常问题 #

你给v-for绑定的key为invoice.number，但三个条目的number值都是123，重复的key会导致Vue复用DOM节点，后续属性更新时出现渲染异常。

3. CSS 优先级冲突问题 #

如果业务中存在isOpen和isUnpaid同时为true的场景，你的CSS代码中.open定义在.unpaid之后，同权重下后定义的样式会覆盖前者，就算unpaid类成功绑定，背景色也会被.open的绿色覆盖。

修复代码示例 #

修正数组属性与唯一标识

invoices:[
  {id: 0, number: 123, amount:"$1,235", status:"open", isOpen:true, isUnpaid:false},
  {id: 1, number: 124, amount:"$1,235", status:"unpaid", isOpen:false, isUnpaid:true},
  {id: 2, number: 125, amount:"$1,235", status:"open", isOpen:true, isUnpaid:false},
],

修正v-for的key绑定为唯一id

<div id="invoicesDiv" v-for="invoice in invoices" :key="invoice.id">

可选：互斥类用三元表达式更稳妥

如果open和unpaid是互斥状态，直接用三元表达式绑定类更简单，也能避免样式冲突：

<button :class="invoice.isUnpaid ? 'unpaid' : 'open'">{{invoice.status}}</button>

内容的提问来源于stack exchange，提问作者luther wardle