In VueJS how to print the v-for’s increment digit key as a suffix to a CSS class-CodePudding

I simply want to increment a CSS class based on the loop count using the index value as a suffix to a defined class "classname nb" to get "classname nb1", "classname nb2".

I'm able to print it as content using double curly brackets {{ index }} (in my example below) but I dont’t know what syntaxe to use within the Vue :class prop.

<ol>
    <li v-for="index in 3" :key="index">
        <v-bind  :>
            classname nb{{ index }}
        </v-bind>
    </li>
</ol>

I expect these CSS classes on <v-bing> :

1. classname nb1
2. classname nb2
3. classname nb3

CodePudding user response：

I got the answer from a colleague...

First wrap the classname to index within single quotes for class ( '…' ), for not conflicting with the : double quotes, followed by the plus sign ( ) then the index key.

<v-bind  :>
  {{ "nb"   index }}
</v-bind>

Gives

<v-bind > nb1 </v-bind>
<v-bind > nb2 </v-bind>
<v-bind > nb3 </v-bind>

CodePudding user response：

you can use template literals like this:

<ol>
<li v-for="index in [1,2,3]" :key="index">
    <v-bind  :class=`nb${index}`>
        classname nb{{ index }}
    </v-bind>
</li>