vue for循环案例 input name="array[]"
时间: 2023-06-13 22:06:00 浏览: 92
好的,我理解了你的问题。以下是一个基于 Vue.js 的 for 循环案例:
```
<template>
<div>
<h2>Vue for 循环示例</h2>
<form>
<div v-for="(item, index) in items" :key="index">
<label>
Item {{ index + 1 }}:
<input type="text" :name="'item-' + index" v-model="item">
</label>
</div>
</form>
<button @click="submitForm">提交表单</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['apple', 'banana', 'cherry']
}
},
methods: {
submitForm() {
// 处理表单提交逻辑
}
}
}
</script>
```
这个示例中,我们使用 `v-for` 指令循环渲染了一个包含多个文本框的表单。使用 `:key` 绑定了每个循环项的索引,同时利用了 Vue.js 的双向数据绑定,将每个文本框的值绑定到了对应的数据项上。当用户点击提交按钮时,可以调用组件的 `submitForm` 方法处理表单提交逻辑。
阅读全文