Question

在以下代码中将类传递给%item.class%的正确语法是什么？任何[item.class]或{{ item.class }}之类的语法都将其作为字符串传递而无需渲染。如何正确通过？

如何传递多个类并应用于嵌套在一个模板中的多个标签（a，span等）？通过数组？如何迭代呢？

<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

您可以将绑定的类与非绑定的类分开：

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

Answer 3

解决方案：您可以将对象传递到System.Net.Mime v-bind:class以动态切换类：

:class

绑定HTML类

对象语法：

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

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

数组语法：

data: {
  isActive: true
}

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

VueJS：如何将类传递给模板？

3 个答案: