javascript - 如何在某些特定条件下迭代 HTML 元素？

Question

问题陈述： v-for循环在 HTML 模板中正确地迭代和绑定数据，但不能根据某些条件部分地迭代它。请在 JSFiddle 链接下方找到演示。

要求：在上面的演示链接中，对于“第二部分”，我只想显示输入文本框一次，它将垂直对齐中心（在 beta 前面），而不是多次重复。其他值将重复（即 alpha、beta、gama）。

小提琴

任何帮助都将是非常可观的。

var arr = [{
    sectionName: 'First Section',
  data: ['alpha', 'beta']
}, {
    sectionName: 'Second Section',
  data: ['alpha', 'beta', 'gama']
}];

var myitem = new Vue({
  el: '#my-items',
  data: {
    items: arr
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>

<div id="my-items">
  <div v-for="item in items">
    {{ item.sectionName }} <hr>
    <div v-for="sectionData in item.data" style="margin: 5px">
      <span style="width:50px;text-align:left;display:inline-block;">{{ sectionData }}</span> <input type="textbox"/>
    </div>
  </div>
</div>

标签： javascriptvue.jsfor-loopvuejs2

Answer 1

您可以将索引传递给您的 v-for，然后在循环内的条件中使用它。我已经修改了您的示例以显示原理。文本框出现在第一个循环的每个部分，或者如果 sectionData === beta。您可以在 v-if 中看到这种情况。

这可行，但一般来说，每次使用 v-for 时，都应该创建一个组件。否则，该结构很快就会变得难以理解。

var arr = [{
    sectionName: 'First Section',
  data: ['alpha', 'beta']
}, {
    sectionName: 'Second Section',
  data: ['alpha', 'beta', 'gama']
}];

var myitem = new Vue({
  el: '#my-items',
  data: {
    items: arr
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>

<div id="my-items">
  <div v-for="(item, index) in items">
    {{ item.sectionName }} <hr>
    <div v-for="sectionData in item.data" style="margin: 5px">
      <span style="width:50px;text-align:left;display:inline-block;">{{ sectionData }}</span>
      <input 
        v-if="index === 0 || sectionData === 'beta'"
        type="textbox"
      />
    </div>
  </div>
</div>