Question

我正在尝试将类名绑定到class属性中，vuejs循环遍历这样的数组：

这里我将方法调用传递给：class =“paymentTypeClass（value）”以绑定到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()]

（以后更容易添加更多课程）

for循环数组并将类绑定到vuejs中的元素类属性

1 个答案: