表单数据绑定
1.1你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。1.2.文本 <input v-model="message" placeholder="edit me"> <p>Message is: { { message }}</p>1.3多行文本 <span>Multiline message is:</span> <p style="white-space: pre">{ { message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Multiline message is:1.4复选框单个勾选框，逻辑值：<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{ { checked }}</label>1.5单选按钮 <div id="example-4" class="demo"> <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: '#example-4', data: { picked: '' } }) 1.5选择列表 <div id="example-5" class="demo"> <select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: { { selected }}</span> </div> new Vue({ el: '#example-5', data: { selected: null } })1.6.多选列表 <div id="example-6" class="demo"> <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.7for渲染 <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> { { option.text }} </option> </select> <span>Selected: { { selected }}</span> new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })2.值绑定对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）<!-- 当选中时，`picked` 为字符串 "a" -->
input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>