进修笔记：
表单与v-model

表单与v-model

Vue.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">