目录

1.基础用法

1.1 文本

1.2 多行文本

1.3 复选框

1.4 单选按钮

1.5 选择框

2.值绑定

2.1 复选框

2.2 单选按钮

2.3 选择框的选项

3.修饰符

3.1 .lazy

3.2 .number

3.2 .trim

1.基础用法

你可以用 v-model 指令在表单 、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&＃xff0c;但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据&＃xff0c;并对一些极端场景进行一些特殊处理。</p> <p><code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 Javascript 在组件的 <code>data</code> 选项中声明初始值。</p> <p><code>v-model</code> 在内部为不同的输入元素使用不同的 property 并抛出不同的事件&＃xff1a;</p> <br><ul><li id="uc7e7aebf">text 和 textarea 元素使用 <code>value</code> property 和 <code>input</code> 事件&＃xff1b;</li><li id="u0b1cf46f">checkbox 和 radio 使用 <code>checked</code> property 和 <code>change</code> 事件&＃xff1b;</li><li id="u47b77f10">select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li></ul><p>对于需要使用输入法 (如中文、日文、韩文等) 的语言&＃xff0c;你会发现 <code>v-model</code> 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程&＃xff0c;请使用 <code>input</code> 事件。</p> <br><h2 id="u523de147">1.1 文本</h2> <p><code><input v-model&＃61;"message" placeholder&＃61;"edit me"><br><p>Message is: {{ message }}</p></code></pre> <br><h2 id="afca88b7">1.2 多行文本</h2> <p><code><span>Multiline message is:</span><br><p style&＃61;"white-space: pre-line;">{{ message }}</p><br><br><br><textarea v-model&＃61;"message" placeholder&＃61;"add multiple lines">

在文本区域插值 ({{text}}) 并不会生效&＃xff0c;应用 v-model 来代替。

1.3 复选框

单个复选框&＃xff0c;绑定到布尔值&＃xff1a;


{{ checked }}

多个复选框&＃xff0c;绑定到同一个数组&＃xff1a;


Jack

John

Mike


Checked names: {{ checkedNames }}


1.4 单选按钮

1.5 选择框

单选时&＃xff1a;

如果 v-model 表达式的初始值未能匹配任何选项&＃xff0c; 元素将被渲染为“未选中”状态。在 iOS 中&＃xff0c;这会使用户无法选择第一个选项。因为这样的情况下&＃xff0c;iOS 不会触发 change 事件。因此&＃xff0c;更推荐像上面这样提供一个值为空的禁用选项。

多选时 (绑定到一个数组)&＃xff1a;

ABC
Selected: {{ selected }}