Vue 动态
表单的
数据获取可以通过以下两种方式实现：
1. 双向绑定：在 Vue 中，可以
使用 `v-model` 指令实现
数据的双向绑定。在动态
表单中，可以将
表单元素的值绑定到 Vue 实例中的
数据属性上，这样当
表单元素的值发生变化时，对应的
数据属性也会自动更新。同时，当
数据属性的值发生变化时，
表单元素的值也会自动更新。
示例代码：
```html
<template>
<div>
<
form>
<div v-for="(item, index) in
formItems" :key="index">
<
label>{{ item.
label }}</
label>
<input v-model="
formData[item.name]" :type="item.type">
</div>
</
form>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
formItems: [
{
label: '姓名', name: 'name', type: 'text' },
{
label: '年龄', name: 'age', type: 'number' },
{
label: '性别', name: 'gender', type: '
radio', options: [{
label: '男', value: 'male' }, {
label: '女', value: 'female' }] },
],
formData: {},
}
},
methods: {
submit() {
console.log(this.
formData) // 输出
表单数据
}
}
}
</script>
```
2.
表单提交：在
表单提交时，可以通过
表单元素的 `name` 属性来
获取表单数据。在 Vue 中，可以通过 `ref` 属性来
获取表单元素的引用，然后在提交
表单时，通过引用
获取表单元素的值。
示例代码：
```html
<template>
<div>
<
form ref="
form">
<div v-for="(item, index) in
formItems" :key="index">
<
label>{{ item.
label }}</
label>
<input :name="item.name" :type="item.type">
</div>
</
form>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
formItems: [
{
label: '姓名', name: 'name', type: 'text' },
{
label: '年龄', name: 'age', type: 'number' },
{
label: '性别', name: 'gender', type: '
radio', options: [{
label: '男', value: 'male' }, {
label: '女', value: 'female' }] },
],
}
},
methods: {
submit() {
const
formData = {}
const
form = this.$refs.
form
for (let i = 0; i <
form.length; i++) {
const input =
form[i]
if (input.name) {
formData[input.name] = input.value
}
}
console.log(
formData) // 输出
表单数据
}
}
}
</script>
```
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
