v-bind类不改变对象属性上的CSS

Question

我试图动态改变一些基于对象道具的按钮上的css列表，这是我的数据在下面渲染，我试图遵循文档和我的设置似乎很好，但我一定错过了一些东西https://v2.vuejs.org/v2/guide/class-and-style.html希望有人能指出来:)非常感谢

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

],

下面是我编写模板的尝试，并使用vbind根据发票切换类。isOpen或invoice. ispaid

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

<img v-bind:style="{ 'margin-top':'.5em'}" src="../assets/svg/logo.svg" height="40px"/>

<section>
<small>Invoice No.</small>
<p>{{invoice.number}}</p>
</section>
<section>
<small>USD</small>
<p>{{invoice.amount}}</p>
</section>
<section>
<button v-bind:class="{open: invoice.isOpen, unpaid: invoice.isUnpaid}">{{invoice.status}}</button>
</section>
<img src="../assets/agency/ic_actions-1.svg" height="30px"/>
</div>

如你所见，section按钮应该将类更新为->开放或无偿，但不幸的是，它似乎只更新到开放类:(

我的CSS

.unpaid{
background-color: red;
border:none;
}
.open{
background-color: green;
border:none;
}

Answer 1

1. 绑定类必须位于数组上
2. 类名可以用单引号括起来
3. 条件必须返回布尔

<button :class="[{'open': invoice.isOpen}, {'unpaid': invoice.isUnpaid}]">
{{invoice.status}}
</button>

Answer 2

我实际上能够通过参考发票来修复它。状态，其中Status是一个带有字符串的属性，该字符串与CSS类名

匹配。的例子:模板

<button :class="invoice.status">{{invoice.status}}</button>

要呈现的数据

{id: 0, number: 123, amount:"$1,235", status:"open"},

使用模板

呈现的CSS

.open{
background-color: green;
border:none;
}

Answer 3

将类名用单引号括起来

<button v-bind:class="{'open': invoice.isOpen, 'unpaid': invoice.isUnpaid}">{{invoice.status}}</button>

并确保isOpen和isUnpaid保持预期的布尔值，以便您可以在UI

上观察到差异