Jaka jest prawidłowa składnia do przekazania klasy do %item.class% w poniższym kodzie? Dowolna składnia, taka jak [item.class] lub {{ item.class }} przekazuje to jako ciąg bez renderowania. Jak to poprawnie przekazać?

Jak przekazać kilka klas i zastosować do kilku tagów (a, span itp.) Zagnieżdżonych w jednym szablonie? Przekaż tablicę? Jak to powtórzyć?

<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'},

            ]
        }
    },
 })

Dzięki za ręce :)

2
Ivan Kolyhalov 31 marzec 2020, 22:29

3 odpowiedzi

Najlepsza odpowiedź

Rozwiązanie: możesz przekazać obiekt do v-bind:class :class, aby dynamicznie przełączać klasy:

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

Wiązanie klas HTML

  • Składnia obiektu:
<div v-bind:class="{ active: isActive }"></div>
data: {
  isActive: true
}
  • Składnia tablicy:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Więcej informacji Oficjalna dokumentacja

2
Anass Ez-zouaine 31 marzec 2020, 22:59

Możesz oddzielić klasy związane od klas nieograniczonych:

 template: `<li :class="item.class">
                     <a class="fa" :class="item.class"></a>
                     <span class="fa" :class="item.class"></span>
                  </li>`
2
Boussadjra Brahim 31 marzec 2020, 19:35
<li :class="item.class">
<a class="fa" :class="item.class">
4
Eggon 31 marzec 2020, 19:33