vue项目表单录入界面代码
时间: 2023-10-05 10:11:27 浏览: 96
以下是一个简单的 Vue 表单录入界面代码示例:
```
<template>
<div>
<h2>录入信息</h2>
<form @submit.prevent="submitForm">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" required>
</div>
<div>
<label for="age">年龄:</label>
<input type="number" id="age" v-model.number="age" required>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="email" required>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: null,
email: ''
};
},
methods: {
submitForm() {
// 在这里处理表单提交逻辑
console.log(this.name, this.age, this.email);
// 清空表单
this.name = '';
this.age = null;
this.email = '';
}
}
};
</script>
```
该示例展示了一个简单的表单录入界面,包括姓名、年龄和邮箱三个输入框。通过 `v-model` 指令将输入框的值绑定到组件实例的数据属性中。在 `submitForm` 方法中处理表单提交逻辑,可以在控制台输出表单数据,同时清空输入框。
阅读全文