Vue.js 表单控件绑定 v-model

2025-02-04 技术教程

v-model 主要用于input、textarea、select等表单控件元素上创建双向数据绑定，所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致

1、text 文本

<divid="app"><h2>`message`</h2><inputtype="text"v-model="message"/></div>

newVue({el:'#app',data:{message:'HelloWorld!'}})

查看页面效果，随着文本输入框种的内容发生改变，与Vue实例中data绑定的h2的内容也相应发生改变

2、textarea 多行文本

<divid="text"><p>Multilinemessageis:`msg`</p><textareav-model="msg"></textarea></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm=newVue({el:'#text',data:{msg:''}})</script>

3、checkbox 复选框

（1）、单个勾选框，逻辑值

<divid="app"><inputtype="checkbox"id="checkbox"v-model="checked"><labelfor="checkbox">`checked`</label></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm1=newVue({el:'#app',data:{checked:true}});</script>

（2）、多个勾选框，绑定到同一个数组

<divid="app1"><inputtype="checkbox"id="jack"value="jack"v-model="checkNames"><labelfor="jack">Jack</label><inputtype="checkbox"id="jhon"value="jhon"v-model="checkNames"><labelfor="jhon">Jhon</label><inputtype="checkbox"id="mike"value="mike"v-model="checkNames"><labelfor="mike">Mike</label><p>CheckedNames:`checkNames`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm1=newVue({el:'#app',data:{checked:true}});</script>

4、radio 单选按钮

<divid="app2"><inputtype="radio"id="male"value="male"v-model="gender"><labelfor="male">Male</label><inputtype="radio"id="female"value="female"v-model="gender"><labelfor="female">Female</label><p>Gender:`gender`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm3=newVue({el:'#app2',data:{gender:''}});</script>

5、select 选择列表

（1）、单选列表

<divid="app3"><selectv-model="selected"><option>A</option><option>B</option><option>C</option></select><p>Selected:`selected`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm4=newVue({el:'#app3',data:{selected:''}});</script>

（2）、多选列表，绑定到一个数组

<divid="app4"><selectv-model="selected"multiple><option>A</option><option>B</option><option>C</option></select><p>Selected:`selected`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm5=newVue({el:'#app4',data:{selected:[]}});</script>

动态选项，用v-for渲染

<divid="app5"><selectv-model="selected"><optionv-for="optioninoptions"v-bind:value="option.value">`option`.`text`</option></select><p>Selected:`selected`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm6=newVue({el:'#app5',data:{selected:'A',options:[{text:'One',value:'A'},{text:'Two',value:'B'},{text:'Three',value:'C'}]}});</script>

绑定Value

对于单选按钮，勾选框及选择列表选项，v-model绑定的数据通常是静态字符串（对于勾选框是逻辑值）

<inputtype="radio"v-model="picked"value="a"><inputtype="checkbox"v-model="toggle"><selectv-model="selected"><optionvalue="abc">ABC</option></select>

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

<divid="app1"><inputtype="checkbox"v-model="toggle"v-bind:true-value="a"v-bind:false-value="b"></div>//当选中时vm.toggle===vm.a//当没有选中时vm.toggle===vm.b

单选按钮

<inputtype="radio"v-model="pick"v-bind:value="a">//当选中时vm.pick===vm.a

选择列表设置

<selectv-model="selected"><optionv-bind:value="{number:123}">123</option></select>//当选中时typeofvm.selected//->'object'vm.selected.number//->123

同时，我们也可以通过过滤器的方式去监控页面内容变化

<divid="app"><h2>`message`</h2><inputtype="text"v-model="message"/><pre>{{$data|json}}</pre></div>

修饰符

除了以上用法，v-model指令后面还可以添加多个参数（number、lazy、debounce）

1、number

如果想将用户的输入自动转换为Number类型（如果原始值得转换结果为NaN，则返回原值），则可以添加一个number特性。

<divid="app"><inputtype="text"v-model="msg"number><br>`msg`</div><scriptsrc="js/vue.js"></script><script>newVue({el:'#app',data:{msg:'仅处理number类型的数字'}})</script>

2、lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。

<divid="app"><inputtype="text"v-model="msg"lazy><br>`msg`</div><scriptsrc="js/vue.js"></script><script>newVue({el:'#app',data:{msg:'内容是在change事件后才改变的'}})</script>

我们在input输入框中输入内容，虽然触发了input事件，但是因为加入了lazy属性，msg的值一直没有发生变化。

一直到input输入框发生change事件之后

3、debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如：在input中输入内容时要随时发送AJAX请求），那么它较为有用

<divid="app"><inputtype="text"v-model="msg"debounce="5000"><br>`msg`</div><scriptsrc="js/vue.js"></script><script>newVue({el:'#app',data:{msg:'内容是在5s后才改变的'}})

改变input输入框中的内容，msg的值没有马上改变，5s后才发生改变

4、.trim

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

<divid="app1"><inputv-model="msg1"type="text"><p>Thecommonmessageis:`msg1`</p><hr><inputv-model.trim="msg2"type="text"><p>Thetrimmessageis:`msg2`</p></div><scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><script>varvm1=newVue({el:'#app1',data:{msg1:'',msg2:''}})