VUE表单详解

表单

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。使用v-model绑定了值， 那么name属性就可以不用写了。

### html代码
<div id="app">
    {{msg}}
    <br>
    {{stu}}
    <br>
    <!-- 用户名：<input type="text" v-model.lazy="stu.username"> -->
    用户名：<input type="text" v-model.trim="stu.username">
    <br>
    <!-- .number修饰符，可以将采集到的数据转为number类型，然后再存储到数据模型中 -->
    年龄：<input type="text" v-model.number="stu.age">
    <br>
    <!-- 性别 -->
    性别：<input type="radio" value="male" v-model="stu.gender">男
    <input type="radio" value="female" v-model="stu.gender">女
    <br>
    <!-- 爱好 -->
    爱好：<input type="checkbox" value="basketball" v-model="stu.hobby">篮球
    <input type="checkbox" value="swimming" v-model="stu.hobby">游泳
    <input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
    <br>
    <!-- 城市 -->
    城市：
    <!-- <select multiple v-model="stu.city"> -->
    <select v-model="stu.city">
      <option value="shanghai">上海</option>
      <option value="beijing">北京</option>
      <option value="guangzhou">广州</option>
    </select>
    <br>
    <!-- 简介 -->
    简介：<textarea v-model="stu.info" cols="30" rows="10"></textarea>
  </div>
### js代码
	new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        stu: {
          // 复选框
          hobby: []
        }
      },
      methods: {}
    })