Question

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>

“ v-for”正在array的{{1}}中进行迭代，它们具有不同的属性：

objects

如何在第一个代码块中有条件地应用类data () { return { months: [ { month: 'Gen', target: '' }, { month: 'Feb', target: '' }, and so on.，以便只能在下个月加上下划线？

提前谢谢！

Answer 1

只需使用:class = '[{"className": X}]'。注意类属性前的:。

在哪里， X是vue组件中的Boolean计算属性/数据属性。 True将添加类，而False将不会添加。
className是您的CSS类名。

Answer 2

我相信您可以执行以下操作：

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

让我知道是否可行！

编辑：此处有更多信息（还提到了多个类）：https://vuejs.org/v2/guide/class-and-style.html

Answer 3

虽然其他两个答案都是正确的，但如果我理解正确，那么您就需要这两个类-固定类和动态类。

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

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

您可以在方法上轻松设置此条件：

methods: {
   isUnderlined() { return SOME IF STATMENT OR SOMETHING }
}

不要像其他答案状态那样用括号[]包裹：class，因为它期望对象{}

Answer 4

您可以这样做：

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

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

4 个答案: