SOURCE

console 命令行工具 X clear

                    
>
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;
}