0

我正在尝试使用 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
4

1 回答 1

0

你的代码有点混乱。

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

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

然后做

:class="paymentTypeClasses()"

或者

:class="[paymentTypeClasses()]

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

于 2017-07-18T10:25:27.140 回答