学习笔记：表单与v-model表单与v-modelVue.js提供了v-model指令，用于在表单类元素上双向绑定数据。使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue时不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input替代v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。单选按钮单选按钮在单独使用时，不需要v-model，直接使用v-bind把你当一个布尔类型的值，为真时选中，为否时不选。<div id=“app”> <input type=“radio” :checked=“picked” id=“radio”> <label for=“radio”>单选按钮</label></div>如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用。<div id=“app”> <p> <input type=“radio” v-model=“picked” value=“html” id=“html”> <label for=“html”>HTML</label> </p> <p> <input type=“radio” v-model=“picked” value=“js” id=“js”> <label for=“js”>JavaScript</label> </p> <p> <input type=“radio” v-model=“picked” value=“css” id=“css”> <label for=“css”>CSS</label> </p> <p>选择的项：{{picked}}</p></div>复选框复选框单独使用时，也是用v-model绑定一个布尔值。组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项。这一过程也是双向的，在勾选时value得知也会自动push到这个数组中。选择列表选择列表就是下来选择器，分为单选和多选两种方式。<option>是备选项，如果含有value属性，v-model就会优先匹配value值；如果没有，就会直接匹配<option>的text。在业务中，<option>经常用v-for动态输出，value和text也是用v-bind动态输出。绑定值在业务中，有时需要绑定一个动态的数据，这时可以使用v-bind实现。单选按钮<div id=“app”> <input type=“radio” v-model=“picked” :value=“value”> <p>{{picked}}</p> <p>{{value}}</p></div>data: { picked: false, value: 123},在选中时，app.picked===app.value，值都是123。复选框<div id=“app”> <input type=“checkbox” v-model=“toggle” :true-value=“value1” :false-value=“value2”> <p>{{toggle}}</p> <p>{{value1}}</p> <p>{{value2}}</p></div>选择列表<div id=“app”> <select v-model=“selected”> <option :value="{number:123}">123</option> </select> {{selected.number}}</div>当选中时，app.selected是一个Object，所以app.selected.number===123。修饰符与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。.lazy在输入框中，v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步。<div id=“app”> <input type=“text” v-model.lazy=“message”> <p>{{message}}</p></div>这时，message并不是实时变化，而是在失焦或按回车键时才更新。.number使用修饰符.number可以将输入转换成Number类型，否则输入的数字，但它的类型其实是String，在数字输入框时比较有用。<div id=“app”> <input type=“number” v-model.number=“message”> <p>{{typeof message}}</p></div>.trim修饰符.trim可以自动过滤输入的首尾空格。<input type=“text” v-model.trim=“message”>