示例
TheForm.vue
<template>
<form @submit.prevent="submitData">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="userName"/>
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" />
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" type="checkbox" />
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" type="checkbox" />
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" type="checkbox" />
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" type="radio" />
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" type="radio" />
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" type="radio" />
<label for="how-other">Other</label>
</div>
</div>
<div>
<button>Save Data</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
userName: '',
// age: 0,
// referrer: 'google',
// interests: [],
// how: ''
};
},
methods: {
submitData() {
console.log("UserName: " + this.userName);
this.userName = '';
}
}
};
</script>
<style scoped>
form {
margin: 2rem auto;
max-width: 40rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 2rem;
background-color: #ffffff;
}
.form-control {
margin: 0.5rem 0;
}
label {
font-weight: bold;
}
h2 {
font-size: 1rem;
margin: 0.5rem 0;
}
input,
select {
display: block;
width: 100%;
font: inherit;
margin-top: 0.5rem;
}
select {
width: auto;
}
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
width: auto;
margin-right: 1rem;
}
input[type='checkbox']+label,
input[type='radio']+label {
font-weight: normal;
}
button {
font: inherit;
border: 1px solid #0076bb;
background-color: #0076bb;
color: white;
cursor: pointer;
padding: 0.75rem 2rem;
border-radius: 30px;
}
button:hover,
button:active {
border-color: #002350;
background-color: #002350;
}
</style>
main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
App.vue
<template>
<the-form></the-form>
</template>
<script>
import TheForm from './components/TheForm.vue';
export default {
components: {
TheForm
}
}
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
background-color: #292929;
}
</style>