Vue.js实战—表单与v-model

1.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面的例子：

<div id="app">
    <input type="text" v-model="message" placeholder="输入...">
    <p>输入的内容是:{{message}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>

 在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。

对于文本域textarea也是同样的用法:

<div id="app">
    <textarea v-model="text" placeholder="输入..."></textarea>
    <p>输入的内容是:</p>
    <p style="white-space:pre">{{text}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: ''
        }
    })
</script>

使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。

使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以使用@input来代替v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。例如：

<div id="app">
    <input type="text" @input="handleInput" placeholder="输入...">
    <p>输入的内容是:{{message}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        },
        methods: {
            handleInput: function (e) {
                this.message = e.target.value;
            }
        }
    })
</script>

1.2 绑定值

单选按钮：

<div id="app">
    <input type="radio" v-model="picked" :value="value">
    <label>单选按钮</label>
    <p>{{picked}}</p>
    <p>{{value}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: false,
            value: 123
        }
    })
</script>

在选中时，app.picked===app.value，值都是123。

复选框：

<div id="app">
    <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
    <label>复选框</label>
    <p>{{toggle}}</p>
    <p>{{value1}}</p>
    <p>{{value2}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            toggle: false,
            value1: 'a',
            value2: 'b'
        }
    })
</script>

勾选时，app.toggle===app.value1；未勾选时，app.toggle===app.value2。

选择列表：

<div id="app">
    <select type="checkbox" v-model="selected">
        <option :value="{number:123}">123</option>
    </select>
    {{selected.number}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    })
</script>

当选中时，app.selected是一个Object，所以app.selected.number===123。

1.3 修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy:

在输入框中，v-model默认是在input事件中同步输入框的数据（除了中文输入法情况外），使用修饰符.lazy会转变为在change事件中同步，例如：

<div id="app">
    <input type="text" v-model.lazy="message">
    <p>{{message}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>

这时，message并不是实时改变的，而是在失焦或按回车时才更新。

.number:

使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String，比如在数字输入框时会比较有用，例如：

<div id="app">
    <input type="text" v-model.number="message">
    <p>{{ typeof message}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>

.trim:

修饰符.trim可以自动过滤输入的首尾空格，例如：

<div id="app">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>