表单输入绑定

一、基础用法：

　　可以用 v-model 指令在表单 <input>、<testarea>、<select> 元素上创建双向数据绑定。它会根据空间类型自动选取正确的方法更新元素。

　　v-model 本质是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

　　v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值，总是将 Vue 实例的数据作为数据来源，可以通过 js 在组件的 data 选项中声明初始值。

　　v-model 在内部为不同的输入元素使用不同的 propetry 并抛出不同的事件：

　　　　text 和 textarea 元素使用value property 和 input 事件；

　　　　checkbox 和 radio 使用 checked property 和 change 事件；

　　　　select 字段将 value 作为 prop 并将 changge 作为事件。

　　1、文本：

<div id="test">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>

new Vue({
        el: '#test',
        data: {
            message: ''
        }
    })

　　结果为：

 

 　　2、多行文本：

<div id="test">
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

new Vue({
        el: '#test',
        data: {
            message: ''
        }
    })

　　结果为：

 

 　　3、复选框：

　　　　单个复选框，绑定到布尔值：

<div id="test1">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
</div>

new Vue({
        el: '#test1',
        data: {
            checked: ''
        }
    })

　　结果为：

 

 　　　　多个复选框，绑定到同一个数组：

<div id="test2">
    <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: '#test2',
        data: {
            checkedNames: []
        }
    })

　　结果为：

 

 　　4、单选按钮：

<div id="test">
    <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: '#test',
        data: {
            picked: ''
        }
    })

　　结果为：

 

　　5、选择框：

　　　　单选时：

<div id="test1">
    <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: '#test1',
        data: {
            selected: ''
        }
    })

　　结果为：

 

 　　　　多选时：

<div id="test2">
    <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: '#test2',
        data: {
            selected: []
        }
    })

　　结果为：

 

 　　　　用 v-for 渲染的动态选项：

<div id="test3">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

new Vue({
        el: '#test3',
        data: {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })

　　

 

 二、值绑定：

　　对于单选按钮，复选框及选择框的选项， v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值):

<div id="test">
    <!-- 当选中时，vm.pick === vm.a -->
    <input type="radio" v-model="pick" v-bind:value="a">

    </br>

    <!-- `toggle` 为 true 或 false -->
    <input
            type="checkbox"
            v-model="toggle"
            true-value="yes"
            false-value="no"
    >

    </br>

<!--    typeof vm.selected // => 'object'-->
<!--    vm.selected.number // => 123-->
    <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
    </select>
</div>

　　结果为：

 

 三、修饰符：

　　1、 .lazy：

　　　　在默认情况下， v-model 在每次 input 事件触发后将输入框的值月数据进行同步(除了上诉输入法组合文字时）,

　　　　可以通过添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

　　2、.number

　　　　如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

　　　　一般情况下很有用，因为即便  type="number"  时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

　　3、.trim

　　　　如果要自动过滤用户输入的首位空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">