vue使用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。下面我们通过示例先了解下基本用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue表单输入与绑定--基础用法</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <!-- 文本的输入与绑定 --> <p>文本的输入与绑定:</p> <input type="text" v-model="msg" placeholder="请输入"> <p>输入的文本是:{{msg}}</p> <!-- 多行文本的输入与绑定 --> <p>多行文本的输入与绑定:</p> <textarea v-model="multiMsg" placeholder="请输入"></textarea> <p>输入的文本是:{{multiMsg}}</p> <!-- 单个复选框 --> <p>单个复选框</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!-- 多个复选框 --> <p>多个复选框</p> <div> <input type="checkbox" id="banana" value="香蕉" v-model="fruits"> <label for="banana">香蕉</label> <input type="checkbox" id="apple" value="苹果" v-model="fruits"> <label for="apple">苹果</label> <input type="checkbox" id="pear" value="鸭梨" v-model="fruits"> <label for="pear">鸭梨</label> </div> <p>当前选中的水果为:{{fruits}}</p> <!-- 单选按钮 --> <p>单选按钮:</p> <div> <input type="radio" id="bmw" value="宝马" v-model="cars"> <label for="bmw">宝马</label> <input type="radio" id="benz" value="奔驰" v-model="cars"> <label for="benz">奔驰</label> <input type="radio" id="audi" value="奥迪" v-model="cars"> <label for="audi">奥迪</label> </div> <p>当前选中的品牌为:{{cars}}</p> <!-- 下拉选框 --> <p>下拉选框</p> <div> <select v-model="dogs"> <option disabled value="">请选择</option> <option>泰迪</option> <option>雪纳瑞</option> <option>杜宾</option> </select> </div> <p>你喜欢的狗狗是:{{dogs}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { msg: '', multiMsg: '', checked: false, fruits: [], cars: '', dogs: '', selected: 'selected' } }); </script> </body> </html>
基础用法中,使用的数据都是写死的数据,是静态的,但是有时候,有些需求需要展示接口请求过来的动态数据,这时候,怎么绑定表单数据呢,下面我们也是通过代码示例来看看怎么动态进行值绑定:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue表单输入与绑定--值绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <!-- 复选框 --> <input type="checkbox" v-model="toggle" id="toggleInput" true-value="yes" false-value="no"> <label for="toggleInput">点击切换显示下方绑定的值</label> <p>绑定的值为:{{toggle}}</p> <!-- 单选按钮 --> <input type="radio" v-model="pick" v-bind:value="fruits" id="fruits"> <label for="fruits">点我一下</label> <p>我喜欢吃:{{pick}}</p> <!-- 下拉选框 --> <select v-model="selected"> <option disabled value="">请选择</option> <option v-for="items in flowers" v-bind:value="items.meaning">{{items.name}}</option> </select> <p>选择花名提示花语 {{selected}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { toggle: '', pick: '', fruits: '苹果梨', selected:'', flowers: [{ name:'玫瑰', meaning:'爱情', }, { name:'百合', meaning:'纯洁', }, { name:'康乃馨', meaning:'母爱', }] } }); </script> </body> </html>
上面就是绑定动态值的示例,最后来看一下修饰符,v-model有三个修饰符,.lazy、.number、.trim,下面看下用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue表单输入与绑定--修饰符</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div class="myApp"> <p>.lazy,使用这个修饰符,绑定的值不会在输入事实时更新,而是在change事件触发时更新,即失去焦点的时候更新</p> <input v-model.lazy="msg"> <p>输入的内容为:{{msg}}</p> <p>.number,使用number修饰符,输入的内容如果不是数字类型,不会更新,而且当鼠标失去焦点时,输入的内容也会清空,只有输入数字类型才可以更新显示</p> <input v-model.number="age"> <p>年龄为:{{age}}</p> <p>.trim,使用trim修饰符,自动过滤用户输入的首尾空白字符</p> <input v-model.trim="text"> <p>文本内容为:{{text}}</p> </div> <script> var myApp = new Vue({ el: '.myApp', data: { msg: '', age: 18, text: '' } }); </script> </body> </html>