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>

Извините за вышеКод является лишь примером, но более или менее это проблема, с которой я имею дело.Может кто-то помочь мне с этим?Спасибо.

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