vue前端制作联系我们页面
时间: 2023-06-12 15:03:08 浏览: 187
好的,以下是一个简单的联系我们页面的vue前端制作示例:
```vue
<template>
<div class="contact-us">
<h1>Contact Us</h1>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" v-model="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" v-model="message" required></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
name: 'ContactUs',
data() {
return {
name: '',
email: '',
message: '',
}
},
methods: {
handleSubmit() {
// 在此处添加您的表单提交逻辑
console.log(`Name: ${this.name} Email: ${this.email} Message: ${this.message}`);
},
},
};
</script>
<style scoped>
.contact-us {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input,
textarea {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0062cc;
}
</style>
```
注意,这只是一个简单的示例,实际的联系我们页面可能需要更复杂的表单字段和验证逻辑。您可以根据自己的需求进行修改和扩展。