表单输入绑定 · 教案-标准教案-前端高阶(v1)

## 表单输入绑定 ### 基础用法 ~~~ 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 ~~~ ~~~ <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~ ~~~ <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> ~~~ ~~~ <input v-bind:value="test" v-on:input="test=$event.target.value"> ~~~ ### 复选框 ~~~ <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> ~~~ 多个复选框，绑定到同一个数组 ~~~ <div id='app'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> ~~~ ~~~ new Vue({ el: '#app', data: { checkedNames: [] } }) ~~~ ### 单选按钮 ~~~ <div id="app"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> ~~~ ~~~ new Vue({ el: '#app', data: { picked: '' } }) ~~~ ### 选择框单选 ~~~ <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> ~~~ ~~~ new Vue({ el: '...', data: { selected: '' } }) ~~~ 多选 ~~~ <div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> ~~~ ~~~ new Vue({ el: '#example-6', data: { selected: [] } }) ~~~ ### 修饰符 1.lazy ~~~  <input v-model.lazy="msg" > ~~~ 2.number ~~~ <input v-model.number="age" type="number"> ~~~ 3.trim ~~~ <input v-model.trim="msg"> ~~~ ### 课后习题 1.使用vue表单输入绑定的知识点完成一个表单，表单里面包括用户姓名（input），性别（radio），年龄段（select），爱好（checkbox）。然后点击提交，打印出表单里用户输入的信息。