Vue中的表单绑定（全 gif 演示）

砖业洋__

发布于 2023-05-06 20:11:10

7990

发布于 2023-05-06 20:11:10

文本input的输入绑定

这是我们最常见的使用方法，在input标签上使用v-model

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文本的输入绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="value" />
            {{value}}
        </div>
        <script>
        var vm = new Vue({
            el: "#app",
            data: {
                value: ""
            },
        })
    </script>
    </body>
</html>

运行结果

但是v-model绝不仅仅只在input上面玩，还可以在别的标签上面玩，这篇就给大家来介绍一下

多行文本textarea的输入绑定

将上面一个例子的<input>改为<textarea>就可以了

        <div id="app">
            <textarea v-model="value"></textarea>
            {{value}}
        </div>

运行结果

注意：在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

复选框checkbox的绑定

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>复选框的输入绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>

    <body>
        <div id="app">
            <input type="checkbox" id="cbox" v-model="value">
            <label for="cbox">{{value}}</label>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    value: ""
                },
            })
        </script>
    </body>

</html>

运行结果

刚开始label中是空串，无法点击，后来点击true和false就同步复选框的点击操作。这里需要 checkbox 的 id 和 label 的 for 属性对应同一个值即可。

可千万别写成<checkbox id="cbox" v-model="value">，否则会报错，找不到该组件

多个复选框绑定到同一个数组见这里：多选框的绑定

单选框radio的绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>单选框的绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <input type="radio" value="写在type='radio'上的value属性值，通过v-model双向绑定的变量val显示" v-model="val">
            {{val}}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    val: ""
                },
            })
        </script>
    </body>

</html>

运行结果

另一个例子见这里：单选框的绑定

选择框select的绑定

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>下拉选择框的绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>

    <body>
        <div id="app">
            <select v-model="val">
                <option disabled value="">--请选择--</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            {{val}}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    val: ""
                },
            })
        </script>
    </body>

</html>

运行效果

为什么要disabled，为了让"--请选择--"这一项不被选中。为什么第一项加上value=""，因为要默认选中第一项，这样v-model就能匹配第一项。如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态，即下拉框默认是白的，没有任何选中。我们来试试如果去掉value=""的未选中效果

看到了吗？去掉value=""默认第一项是白的，啥都不显示，感觉很奇怪。

并且不仅如此，在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

我选中A就显示A，选中B就显示B，能不能有一个映射代表我选择的第几项呢？比如我选中A就显示1，代表选中第1项，当然是可以的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>下拉选择框的绑定</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <select v-model="val">
                <option disabled value="">--请选择--</option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
            </select>
            {{val}}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    val: ""
                },
            })
        </script>
    </body>
</html>

运行结果

这里为option加上了value值，如果value值为""，那么select的数据值就是option的innerText，再通过v-model双向绑定val，如果不为空串，那么v-model绑定的val就是value值。

表单绑定中的修饰符

v-model.lazy

还记得第一个例子吗？文本input的输入绑定，输入什么，就能实时同步显示什么，但是是否有时候会有需求，输入的时候不实时同步，当输入框失去焦点的时候再同步数据的呢？当然有！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单绑定修饰符.lazy</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <input v-model.lazy="val" /> <!-- 这里加上了.lazy -->
            {{val}}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    val: ""
                },
            })
        </script>
    </body>
</html>

运行结果

鼠标点击文本框以外的地方或者按回车可以失去焦点然后同步双向绑定的数据，这应用情景就很多了，这样也可以稍微提高表单填写的性能

v-model.number

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单绑定修饰符.number</title>
        <script src="https://unpkg.com/vue"></script>
    </head>

    <body>
        <div id="app">
            双向绑定的是string类型的值：<input v-model="valStr" />
            {{valStr}}
            <br>
            尝试双向绑定转换成number类型的值：<input type="number" v-model.number="valNum" />
            {{valNum}}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    valStr: "",
                    valNum: ""
                },
                watch: {
                    valStr() {
                        console.log(typeof this.valStr);
                    },
                    valNum() {
                        console.log(typeof this.valNum);
                    }
                }
            })
        </script>
    </body>

</html>

运行结果

我们可以从上面的运行得出结论，input框中的输入默认都是string，所以v-model双向绑定的变量也是string类型。

如果我们v-model.number尝试转换成number类型的时候，如果这个值无法被 parseFloat() 解析，则会返回原始的值。比如科学计数法的字母e，输入e无法被parseFloat()解析，还是string类型。

如果只有v-model而不是v-model.number，即使有 type="number" 时，HTML 输入元素的值也总会返回字符串。如果输入的值无法被 parseFloat() 解析，则会返回原始的值。

如果把上面例子改成如下

尝试双向绑定转换成number类型的值：<input type="number" v-model="valNum" />
<div>{{valNum}}</div>
<!-- 只有type="number"，没有v-model.number -->

运行结果

使用type="number"后就只允许输入计数的数字，包括科学计数法需要使用的e，如果只有v-model而不是v-model.number，即使有 type="number" 时，HTML 输入元素的值也总会返回字符串。这里演示的后面控制台没有继续打印，是因为parseFloat()解析到第二个e就已经无法解析了，就返回前面一串数字，因为没变所以控制台不继续打印。

如果把上面例子改成如下

尝试双向绑定转换成number类型的值：<input v-model.number="valNum" />
<div>{{valNum}}</div>

运行结果

如果开头是数字后面是字母，parseFloat始终解析前面的数字，123eeeee，不管后面多少字母，解析出来的只有123，所以控制台打印3次number就不打印了。

如果parseFloat()无法解析，那么就返回原始的值，也就是string。

所以我们经常使用的是type="number"和v-model.number搭配使用，前者是只允许输入数字和字母e，而后者是尝试将默认输入的string类型转换成number类型，这通常是很有用的。

v-model.trim

我们来看看不加trim是什么效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>表单绑定修饰符.trim</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="val" /><!-- 这里不加.trim -->
            <div>{{val}}</div>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    val: ""
                }
            })
        </script>
    </body>
</html>

运行结果