一个好看的vue信息录入界面
时间: 2023-05-19 07:06:48 浏览: 88
非常感谢您的提问!以下是一个好看的 Vue 信息录入界面的示例代码:
<template>
<div class="form-container">
<form>
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" v-model="name" required>
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" v-model="email" required>
</div>
<div class="form-group">
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone" v-model="phone" required>
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea id="message" name="message" v-model="message" required></textarea>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
phone: '',
message: ''
}
}
}
</script>
<style scoped>
.form-container {
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
line-height: 1.5;
}
button[type="submit"] {
display: block;
margin: 0 auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0062cc;
}
</style>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)