vue 表单输入与绑定 v-model
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>
