vue3循环生成一个form表单
时间: 2023-11-09 14:05:09 浏览: 70
vue+element创建动态的form表单及动态生成表格的行和列
5星 · 资源好评率100%
可以使用Vue3的模板语法和v-for指令来循环生成一个form表单,示例代码如下:
```html
<template>
<form>
<div v-for="(item, index) in formItems" :key="index">
<label>{{ item.label }}</label>
<input v-model="item.value" :type="item.type">
</div>
</form>
</template>
<script>
export default {
data() {
return {
formItems: [
{ label: '姓名', value: '', type: 'text' },
{ label: '年龄', value: '', type: 'number' },
{ label: '性别', value: '', type: 'radio' },
// 其他表单项...
]
}
}
}
</script>
```
在上面的代码中,我们使用了v-for指令来循环生成表单项,同时使用了v-model指令来绑定表单项的值。你可以根据自己的需求修改表单项的内容和数量。
阅读全文