Javascript 如何在特定条件下迭代HTML元素？

问题陈述：

v-for

循环在HTML模板中正确迭代和绑定数据，但无法根据某些条件部分迭代。请在下面找到JSFIDLE链接进行演示

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

任何帮助都是非常值得的

var-arr=[{
sectionName:“第一节”，
数据：['alpha'，'beta']
}, {
sectionName:“第二节”，
数据：['alpha'，'beta'，'gama']
}];
var myitem=new Vue({
el:“#我的物品”，
数据：{
项目：arr
}
})

{{item.sectionName}}

{{sectionData}}

您可以将索引传递到v-for中，然后在循环中的条件语句中使用它。我修改了你的例子来说明原理。对于第一个循环中的每个节，或者如果sectionData==beta，则会显示文本框。您可以在v-if中看到这种情况

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

var-arr=[{
sectionName:“第一节”，
数据：['alpha'，'beta']
}, {
sectionName:“第二节”，
数据：['alpha'，'beta'，'gama']
}];
var myitem=new Vue({
el:“#我的物品”，
数据：{
项目：arr
}
})

{{item.sectionName}}

{{sectionData}}

您能再详细说明一下吗？您能以HTML格式发布预期的输出吗？有点unclear@adiga我用预期的输出更新了OPscreenshot@Shamsail我用预期的输出截图更新了OP。请喝一杯look@RohitJindal动态价值从何而来？在第二部分中，我只想显示一个文本框。我在OP中添加了预期的输出屏幕截图。请看一看。我们不能勾选

sectionData==='beta'

，因为值是动态的，也不是关于

beta

。在第二部分中，只有一个文本框应该垂直对齐。