在Vue.js中,我们可以使用v-model指令来设置表单数据。v-model指令用于在表单元素(如、
<template>
<div>
<label for="name">姓名</label>
<input type="text" id="name" v-model="user.name">
<label for="age">年龄</label>
<input type="number" id="age" v-model="user.age">
<button @click="save">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
age: null,
}
}
},
methods: {
save() {
// 提交表单数据
}
}
}
</script>
在上面的示例中,我们使用v-model指令将表单元素与Vue实例的数据进行双向绑定。当用户在输入框中输入数据时,Vue实例中对应的user.name和user.age数据也会随之改变。
在表单提交时,可以通过调用Vue实例中的方法来获取表单数据并进行提交。例如,在上面的示例中,我们可以在save方法中访问this.user来获取表单数据。