vue component计算form表单数据
时间: 2023-10-08 17:04:45 浏览: 51
在Vue中,可以使用计算属性来计算form表单数据。首先,需要给每个表单元素添加一个v-model指令,将其绑定到组件的data中。然后,在组件中声明一个计算属性,根据表单元素的值计算出需要提交的数据。
例如,假设有一个包含两个输入框的表单组件,分别用于输入姓名和年龄。可以这样编写组件模板:
```html
<template>
<form>
<label>姓名:</label>
<input type="text" v-model="name">
<br>
<label>年龄:</label>
<input type="number" v-model="age">
<br>
<button @click.prevent="submitForm">提交</button>
</form>
</template>
```
然后,在组件的script中定义data和计算属性:
```js
<script>
export default {
data() {
return {
name: '',
age: 0
}
},
computed: {
formData() {
return {
name: this.name,
age: this.age
}
}
},
methods: {
submitForm() {
// 提交表单数据
console.log(this.formData)
}
}
}
</script>
```
这样,当用户输入表单数据时,计算属性formData会自动更新,并且可以在提交表单时使用。