Question

我对Vue非常陌生，仍然坚持使用PHP通常解决的一些条件。我正在尝试使用内部条件循环一个元素。这是我想要的元素：

<ul>
    <li>A</li>
    <li>B</li>
</ul>
<ul>
    <li>C</li>
    <li>D</li>
</ul>

这是我的代码：

<template v-for="(grade , counter) in grades">
    <template v-if="counter % 2 === 0">
        <ul>
    </template>

    <li>{{ grade }}</li>

    <template v-if="counter % 2 == 1">
        </ul>
    </template>
</template>

<script>
new Vue({
    el : "#app",
    data : {
        grades : ['A', 'B', 'C', 'D'],
    },
});
</script>

结果是：

<ul>
</ul>
<li>A</li>
<li>B</li>
<ul>
</ul>
<li>C</li>
<li>D</li>

对不起，上面的代码只是一个示例，但或多或少是我正在处理的问题。有人可以帮我弄这个吗？谢谢。

Answer 1

在这种情况下，我建议使用render函数来减少以下模板中的复杂性

new Vue({
  el: "#app",
  data: {
    grades: ['A', 'B', 'C', 'D'],
  },
  render (createElement) {
    const elements = [];
    const step = 2;
    for (let i = 0; i < this.grades.length; i += step) {
      elements.push(
        createElement(
          'ul',
          {},
          this.grades.slice(i, i + step).map(grade => createElement('li', {}, grade)))
      )
    }

    return createElement('div', {}, elements);
  }
});

JSFiddle：https://jsfiddle.net/cf37vta9/

参考：https://vuejs.org/v2/guide/render-function.html

有条件的Vue循环（如PHP）

1 个答案: