Vuejs: как передать класс (классы) в шаблон?

Question

Какой правильный синтаксис для передачи класса в %item.class% в следующем коде? Любой синтаксис, такой как [item.class] или {{ item.class }}, передает его как строку без визуализации. Как правильно передать его?

Как пройти несколько классов и применить к нескольким тегам (a, span et c.), Вложенным в один шаблон? Передать массив? Как это повторить?

<component v-for="item in List" 
                :item="item"
                :class="item.class"
</component>


let component = Vue.component('component', {
       props: ['item'],
       template: `<li class=" %item.class% ">
                     <a class="fa %item.class% "></a>
                     <span class="fa %item.class%"></span>
                  </li>`
       }),
       data: function (){
        return {
            List: [
                {key:0, class:'someClass'},

            ]
        }
    },
 })

Спасибо, до этого :):

Answer 1

<li :class="item.class">
<a class="fa" :class="item.class">

Answer 2

Решение: Вы можете передать объект в v-bind:class :class для динамического переключения классов:

<li :class="item.class">
                     <a class="fa" :class="item.class"></a>
                     <span class="fa" :class="item.class"></span>
                  </li>

Привязка HTML Классы

• Синтаксис объекта:

<div v-bind:class="{ active: isActive }"></div>

data: {
  isActive: true
}

• Синтаксис массива:

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Дополнительная информация Официальная документация

Answer 3

Вы можете отделить связанные классы от классов без ограничений:

 template: `<li :class="item.class">
                     <a class="fa" :class="item.class"></a>
                     <span class="fa" :class="item.class"></span>
                  </li>`