javascript - Vuejs中如何将css应用到劣等类

Question

我有一个 html 文件，可以通过 vuejs 中的按钮工作。
v-bind:class 可用于一个标签，如下所示。
它消失取决于布尔数据的布尔值。

<h3 v-bind:class="{active: bool}">{{counter.document}}</h3>

但我的目标是我想出现和消失下等阶级取决于上等阶级的条件。
我怎样才能正确地做到这一点？非常感谢您的阅读。

<div v-bind:class="{active: orderOptions.item.document}">
    <button v-on:click="counter.document -= 1">-</button>
    <h3>{{counter.document}}</h3>
    <button v-on:click="counter.document += 1">+</button>
 </div>

标签： javascripthtmlcssvue.js

Answer 1

V-bind:styleVueJS中的使用条件：

v-bind:style= "[condition ? {styleA} : {styleB}]"


<div v-bind:style="[orderOptions.item.document ?"active",""]">
    <button v-on:click="counter.document -= 1">-</button>
    <h3>{{counter.document}}</h3>
    <button v-on:click="counter.document += 1">+</button>
 </div>