php - 带有条件的Vue循环，如PHP

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>

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

标签： phphtmlvue.jsvuejs2

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