Javascript 如何在VueJs对象迭代中有条件地应用CSS类？

Vuetify中的代码：

<v-layout row wrap> 
     <v-flex xs2 v-for="(month, key) in months" :key ="key">
          <router-link class = "decoration" :to="month.target">{{(month.month)}}</router-link>
     </v-flex> 

如何在第一个代码块中有条件地应用带下划线的类

，以便只在某些月份加下划线，而不是全部月份加下划线

---

提前谢谢你

我相信你可以这样做：

<router-link :class="{'underlined': month.shouldUnderline}" :to="month.target">{{(month.month)}}</router-link>

<td :class="props.item[3] == 'pawned' ? 'text-red' : ''">{{ props.item[2] }}</td>

{{（月.月）}

让我知道这是否有效

---

编辑：这里有更多信息（还提到了多个类）：

只需使用

：class='[{“className”：X}]

。注意class属性前面的

：

在哪里,， X是vue组件中的布尔型计算/数据属性。True将添加类，False不会添加类。

---

className是您的css类名

虽然其他两个答案都是正确的，但如果我理解正确的话，您需要两个类—固定类和动态类

您可以通过执行以下操作来实现此目的：

<router-link class="decoration" :class="{ underlined: CONDITION }" :to="month.target">{{(month.month)}}</router-link>

---

不要像其他回答状态那样用括号[]包装：类，因为它需要一个对象{}

您可以这样做：

<router-link :class="{'underlined': month.shouldUnderline}" :to="month.target">{{(month.month)}}</router-link>

<td :class="props.item[3] == 'pawned' ? 'text-red' : ''">{{ props.item[2] }}</td>

{{props.item[2]}

嗨！请看这里：可能重复的