一个简单好看的vue信息录入界面
时间: 2023-07-01 22:16:10 浏览: 87
好的,我可以给您提供一个简单的Vue信息录入界面的示例代码,您可以根据需要进行修改和优化。以下是示例代码:
```html
<template>
<div class="form-container">
<h2>信息录入</h2>
<form>
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" v-model="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="number" id="age" v-model.number="age" placeholder="请输入年龄">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="phone">电话:</label>
<input type="tel" id="phone" v-model="phone" placeholder="请输入电话">
</div>
<button type="button" class="btn" @click="submitForm">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age: '',
email: '',
phone: ''
}
},
methods: {
submitForm() {
// 处理表单提交逻辑
console.log('提交表单', this.name, this.age, this.email, this.phone)
// 清空表单
this.name = ''
this.age = ''
this.email = ''
this.phone = ''
}
}
}
</script>
<style>
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 80px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #2d8cf0;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #1c7ed6;
}
</style>
```
这是一个简单的信息录入界面,包括姓名、年龄、邮箱和电话等字段,用户输入后点击提交按钮即可提交表单。您可以根据实际需求进行修改和优化,例如添加表单验证、显示提交成功提示等。