您的位置：首页 >> Vue >> 《和小米一起学Vue.js》— 表单输入绑定

《和小米一起学Vue.js》— 表单输入绑定

[

孤狼 |

2022-07-30 00:07:36 |

Vue |

1345°C |

0条评论 ]

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

v-model

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

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

TIP：对于需要使用输入法（如中文、日文、韩文等）的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

input

<div>
    <p>{{Text1}}</p>
    <input type="text" v-model="Text1">
</div>

textarea

<div>
    <p>{{text2}}</p>
    <textarea v-model="text2"></textarea>
</div>

radio

如果v-model使用了同一个变量，则radio自动互斥，无需写name互斥

<div>
    <p>{{radiovalue}}</p>
    <label for="r0">0<input id="r0" type="radio" value="0" v-model="radiovalue"></label>
    <label for="r1">1<input id="r1" type="radio" value="1" v-model="radiovalue"></label>
    <label for="r2">2<input id="r2" type="radio" value="2" v-model="radiovalue"></label>
</div>

checkbox

注意：单个checkbox值为布尔值，多个checkbox的值应该为数组类型

<div>
    <p>{{checkvlaues}}</p>
    <label for="cs1">cs1<input type="checkbox" value="true" v-model="checkvlaues"></label>
</div>
<div>
    <p>{{checkvalue}}</p>
    <label for="c0">c0<input type="checkbox" value="c0" v-model="checkvalue"></label>
    <label for="c1">c1<input type="checkbox" value="c1" v-model="checkvalue"></label>
    <label for="c2">c2<input type="checkbox" value="c2" v-model="checkvalue"></label>
</div>

select

当select为多选模式时，对应的值应该为数组类型

<div>
    <p>{{selectvalue}}</p>
    <select v-model="selectvalue">
        <option value="">默认</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

<div>
    <p>{{selectvalue2}}</p>
    <select v-model="selectvalue2" multiple>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 表单输入绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <p>{{Text1}}</p>
            <input type="text" v-model="Text1">
        </div>
        <div>
            <p>{{text2}}</p>
            <textarea v-model="text2"></textarea>
        </div>
        <div>
            <p>{{radiovalue}}</p>
            <label for="r0">0<input id="r0" type="radio" value="0" v-model="radiovalue"></label>
            <label for="r1">1<input id="r1" type="radio" value="1" v-model="radiovalue"></label>
            <label for="r2">2<input id="r2" type="radio" value="2" v-model="radiovalue"></label>
        </div>
        <div>
            <p>{{checkvlaues}}</p>
            <label for="cs1">cs1<input type="checkbox" value="true" v-model="checkvlaues"></label>
        </div>
        <div>
            <p>{{checkvalue}}</p>
            <label for="c0">c0<input type="checkbox" value="c0" v-model="checkvalue"></label>
            <label for="c1">c1<input type="checkbox" value="c1" v-model="checkvalue"></label>
            <label for="c2">c2<input type="checkbox" value="c2" v-model="checkvalue"></label>
        </div>
        <div>
            <p>{{selectvalue}}</p>
            <select v-model="selectvalue">
                <option value="">默认</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div>
            <p>{{selectvalue2}}</p>
            <select v-model="selectvalue2" multiple>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>


    </div>
    <script>
        let ndata={
            Text1:'hello',
            text2:'wo',
            radiovalue:'1',
            checkvlaues:false,
            checkvalue:[],
            selectvalue:'',
            selectvalue2:['2'],
        };
        const app=new Vue({
            el:"#app",
            data:ndata
        });
    </script>
</body>
</html>

修饰符

.lazy

取代 input 监听 change 事件，在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步。

<div>
    <p>{{text1}}</p>
    <input type="text" v-model.lazy="text1">
</div>

.number

输入字符串转为有效的数字，如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

<div>
    <p>{{text2}}</p>
    <input v-model.number="text2" type="number">
</div>

.trim

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

<div>
    <p>{{text3}}</p>
    <input type="text" v-model.trim="text3">
</div>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 修饰符</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <p>{{text1}}</p>
            <input type="text" v-model.lazy="text1">
        </div>
        <div>
            <p>{{text2}}</p>
            <input v-model.number="text2" type="number">
        </div>
        <div>
            <p>{{text3}}</p>
            <input type="text" v-model.trim="text3">
        </div>
    </div>
    <script>
        let ndata={
            text1:'hello',
            text2:123,
            text3:'',
        };
        const app=new Vue({
            el:"#app",
            data:ndata
        });
    </script>
</body>
</html>

转载请注明出处：http://gl.paea.cn/n.php?n=177

如您看得高兴，欢迎随意投喂，让我们坚持创作！

赞赏一个鸡腿

«上一篇《和小米一起学Vue.js》— 高阶函数

下一篇»《和小米一起学Vue.js》— 组件基础

昵称:

邮箱:

还没有人留下遗迹

关于 · 作者

QQ交流给我邮件

交流群恩赐

最热 · 文章

友情 · 链接

综合 · 搜索