console
new Vue({
el: 'form',
data:{
name: '沈志强',
email: 'shen_zq@163.com'
}
})
<form action="" method="get">
<div>
<label for="name" >姓名:</label>
<input v-model="name" type="text" id="name" name="user_name"/>
</div>
<div>
<label for="email">邮件:</label>
<input v-model="email" type="email" id="email" name="user_email" />
</div>
<div>
<label for="message">信息:</label>
<textarea id="message" name="user_message" ></textarea>
</div>
<div class="button">
<button type="submit">Send your message.</button>
</div>
</form>
form{
margin: 0 auto;
width: 300px;
border: 1px solid rgba(192,192,192,.5);
padding: 1em;
border-radius: 1em;
}
form div+div{
margin-top: 1em;
}
label{
width: 3em;
display: inline-block;
text-align: right;
font-family: 微软雅黑;
}
input{
line-height: 2em;
}
input, textarea{
width: 230px;
border: 1px solid #999;
box-sizing: border-box;
line-height:1.5em;
}
input:focus, textarea:focus{
border-color: #000;
}
textarea{
vertical-align: top;
height: 10em;
}
button{
margin-left: .5em;
border-radius: 5px;
line-height: 1.5em;
}
.button{
padding-left: 3em;
}