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

Question

Code in 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> 

The "v-for" is iterating through an array of objects , which have different properties:

data () {
    return {

        months: [
           {
               month: 'Gen',
               target: ''
           },
           {
               month: 'Feb',
               target: ''
           },
          and so on.

How can I conditionally apply the class underlined in the first code block, so that can underline only some months and not all of them?

Thank you in advance!

Answer 1

Just use :class = '[{"className": X}]' . Note the : immediately before the class attribute.

where, X is a computed / data property in the vue component that is Boolean. True will add the class and False won't.
className is your css classname.

Answer 2

I believe you can do something like this:

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

Let me know if that works!

Edit: more info here (also mentions multiple classes): https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 3

While both the other answers are correct, if i understood correctly you want both classes - the fixed and a dynamic one.

You can achieve this by doing:

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

You can easily set this condition on a method:

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

Do not wrap the :class with brackets [] like the other answer states, as it expects an object {}

Answer 4

你可以这样做：

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