用于通过数组和绑定类在vuejs元素类属性

Question

我试图类名结合与vuejs通过一个这样的数组循环类属性循环：

这里我通过在一个方法调用：类= “paymentTypeClass（值）”绑定到VUE模板像这样：

<li v-for="card in paymentType" class="o-pf-list__item" :class="paymentTypeClass(value)"> 
    {{ card }} 
</li> 

new Vue ({ 
    el: '#app', 
    data: { 
    paymentType: ['paymentType1', 'paymentType2', 'paymentType3', 'paymentType4', 'paymentType5'] 
    }, 
    methods: { 
    functionName: function(value) { 
     var i = 0; 

     for (i in this.paymentType) { 

     value = 'o-pf-list__item--' + this.paymentType[i]; 

     } 
     return value + ' pull-left'; 
    } 
    } 
}); 

其结果是，它仅在阵列中打印出的最后一个索引值，从而它实际上是覆盖。为什么是这样？请帮忙。

登录控制台：

o-pf-list__item--bitcoin 
app.js:51663 o-pf-list__item--credit 
app.js:51663 o-pf-list__item--debitcard 
app.js:51663 o-pf-list__item--eft 
app.js:51663 o-pf-list__item--masterpass 
app.js:51663 o-pf-list__item--bitcoin 
app.js:51663 o-pf-list__item--credit 
app.js:51663 o-pf-list__item--debitcard 
app.js:51663 o-pf-list__item--eft 
app.js:51663 o-pf-list__item--masterpass 
app.js:51663 o-pf-list__item--bitcoin 
app.js:51663 o-pf-list__item--credit 
app.js:51663 o-pf-list__item--debitcard 
app.js:51663 o-pf-list__item--eft 
app.js:51663 o-pf-list__item--masterpass 
app.js:51663 o-pf-list__item--bitcoin 
app.js:51663 o-pf-list__item--credit 
app.js:51663 o-pf-list__item--debitcard 
app.js:51663 o-pf-list__item--eft 
app.js:51663 o-pf-list__item--masterpass 
app.js:51663 o-pf-list__item--bitcoin 
app.js:51663 o-pf-list__item--credit 
app.js:51663 o-pf-list__item--debitcard 
app.js:51663 o-pf-list__item--eft 
app.js:51663 o-pf-list__item--masterpass 

Answer 1

你的代码是一个有点混乱。

paymentTypeClass是什么样子？看起来你想要基于你的逻辑元素上的所有类？如果是这样，你可以这样做：

paymentTypeClasses() { 
    const classes = this.paymentType.map(type => 'o-pf-list__item--' + type) 
    classes.push('pull-left') 
    return classes 
} 

然后做

:class="paymentTypeClasses()" 

或

:class="[paymentTypeClasses()] 

（更容易添加更多的类后）