带有条件的Vue循环，如PHP

Posted 2023-02-22

【中文标题】带有条件的Vue循环，如PHP

【英文标题】：Vue loop with conditional like PHP

【发布时间】：2019-03-17 11:54:30

【问题描述】：

我对 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>

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

【问题讨论】：

你能发布你的数组/对象吗？

@Badgy 谢谢你，我刚刚更新了它

将其从 <template v-if="..."> 更改为 <div v-if="...">

欢迎。始终打印第一个 <ul> 和最后一个 </ul> 并在条件下打印 </ul><ul>

@JustCarty 我刚刚尝试了您的建议，它确实有效，但不知何故丢失了一些结果，html 结果：A C...它只显示A和C？

【参考方案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