Vue(六) 表单与 v-model

学习使用 v-model 指令完成表单数据双向绑定

基本用法

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

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

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

使用 v-model 时，如果是用中文输入法输入中文，在拼音阶段，Vue 是不会更新数据的，当敲下汉字时才会触发更新。如果想总是实时更新，可以用 @input 来替代 v-model，例如：

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

来看看更多的表单控件。

单选按钮：

单选按钮在单独使用时，不需要 v-model，直接使用 v-bind 绑定一个布尔类型的值，为真时选中，为假时不选，例如：

<div id="app">
    <input type="radio" :check="picked">
    <label>单选按钮</label>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: true
        }
    })
</script>

如果是组合使用来实现互斥选择的效果，就需要 v-model 配个value 来使用：

<div id="app">
    <input type="radio" v-model="picked" value="html" id="html">
    <label for="html">HTML</label>
    <input type="radio" v-model="picked" value="js" id="js">
    <label for="js">JavaScript</label>
    <input type="radio" v-model="picked" value="css" id="css">
    <label for="css">CSS</label>
    <p>选择的项是：{{ picked }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: 'js'
        }
    })
</script>

数据 picked 的值与单选按钮的 value 值一致时，就会选中该项。

复选框：

复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用 v-model 来绑定一个布尔值，例如：

<div id="app">
    <input type="checkbox" v-model="checked" id="checked">
    <p>选择状态：{{ checked }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checked: false
        }
    })
</script>

在勾选时，数据 checked 的值变为true，lable 中渲染的内容也会更新。

组合使用时，也是 v-model 与 value 一起，多个勾选框都绑定到同一个数组类型的数据，value 的值在数组中，就会选中这一项。这一过程也是双向的，value 的值也会自动 push 到这个数组中，例如：

<div id="app">
    <input type="checkbox" v-model="checked" value="html" id="html">
    <label for="html">HTML</label>
    <input type="checkbox" v-model="checked" value="js" id="js">
    <label for="js">JavaScript</label>
    <input type="checkbox" v-model="checked" value="css" id="css">
    <label for="css">CSS</label>
    <p>选择的项是：{{ checked }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            checked: ['html', 'js']
        }
    })
</script>

选择列表：

选择列表就是下拉选择器，同样分单选和多选两种方式。先看单选的示例：

<div id="app">
    <select v-model="selected">
        <option>html</option>
        <option value="js">JavaScript</option>
        <option>CSS</option>
    </select>
    <p>选择的项是：{{ selected }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: 'html'
        }
    })
</script>

<option> 是备选项，如果含有 value 属性，v-model 就会优先匹配 value 的值；如果没有，就会直接匹配 <option> 的 text，比如选中第二项，selected 的值为 js，而不是 JavaScript。

给 <selected> 添加multiple 就可以多选了，此时 v-model 绑定的是一个数组，与复选框类似，例如：

<div id="app">
    <select v-model="selected" multiple>
        <option>html</option>
        <option value="js">JavaScript</option>
        <option>CSS</option>
    </select>
    <p>选择的项是：{{ selected }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: ['html','js']
        }
    })
</script>

在业务中，<option> 经常用 v-for 动态输出，value 和 text 也是用 v-bind 来动态输出的，例如：

div id="app">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <p>选择的项是：{{ selected }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            selected: 'html',
            options: [
                {
                    text: 'HTML',
                    value: 'html'
                },
                {
                    text: 'JavaScript',
                    value: 'Js'
                },
                {
                    text: 'CSS',
                    value: 'css'
                }
            ]
        }
    })
</script>

绑定值

前面介绍的单选按钮，复选框和选择列表，v-model 绑定的值是一个静态字符串或布尔值，但在业务中，有时需要绑定一个动态的数据，这时可以用 v-bind 来实现。

单选按钮：

<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 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。

修饰符

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

.lazy:

使用修饰符 .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="number" v-model.number="message">
  <p>{{ message }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 123
        },
    })
</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>