web前端开发之vue.js:表单的应用
众所周知,表单用于搜集不同类型的用户输入。那么在vue.js是如何应用的呢?
表单输入绑定
可以用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model
会忽略所有表单元素的 value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
text 和 textarea 元素使用
value
property 和input
事件;checkbox 和 radio 使用
checked
property 和change
事件;select 字段将
value
作为 prop 并将change
作为事件。
双向数据绑定图示
单行文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
实现动态数据传输绑定,如图:
多行文本
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p><br> <textarea v-model="message" placeholder="add multiple lines"></textarea>
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运气男孩test</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>input 元素:</p> <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> <p>textarea 元素:</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> </div> <script> new Vue({ el: '#app', data: { message: '华为呀', message2: '华为官网\r\nhttp://www.huawei.com' } }) </script> </body> </html>
单选按钮
单选按钮的双向数据绑定
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span></div>
new Vue({ el: '#example-4', data: { picked: '' } })
选择框
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span></div>
vue
new Vue({ el: '...', data: { selected: '' } })
注意:如果 v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
多选时 (绑定到一个数组):
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span></div>
new Vue({ el: '#example-6', data: { selected: [] } })
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue hauwei</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>单个复选框:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框:</p> <input type="checkbox" id="hauwei" value="hauwei" v-model="checkedNames"> <label for="hauwei">hauwei</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script> </body> </html>
效果如下:
select 列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.hauwei.com">Huawei</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script> </body> </html>
当我选择huawei时,显示
修饰符
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number">
这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
<input v-model.trim="msg">
总结实例
HTML
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="form"> <label for="username">昵称:</label> <input type="text" id="username" v-model.trim="username"> <br> <label for="age">年龄:</label> <input type="number" id="age" v-model.number="age"> <br> <label for="checkbox">单身:</label> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br> <label>喜欢:</label> <input type="checkbox" id="huawei" value="huawei" v-model="checkedNames"> <label for="huawei">huawei</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <br> <input type="submit" v-on:click="submit"/> <br/> <br/> <span>昵称: {{ username }}</span> <br> <span>年龄: {{ age }}</span> <br> <span>单身: {{ checked }}</span> <br> <span>喜欢: {{ checkedNames }}</span> </div>
vue.js:
//.number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值 //<input v-model.number="age" type="number"> //.trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入 //<input v-model.trim="msg"> var vm=new Vue({ el: '#form', data: { //初始值 username:'yunqinanhai ', age:18, checked : false, checkedNames: ['huawei'] }, methods:{ //提交表单 submit:function(){ var params=new Object(); params.username=this.username; params.age=this.age; params.checked=this.checked; params.checkedNames=this.checkedNames; alert("formdata:"+JSON.stringify(params)); } } }); //vue外部获取vue内部值 console.log(vm.username); console.log(vm.age); console.log(vm.checked); console.log(vm.checkedNames);
效果:
书山有路勤为径,学海无涯苦作舟!加油!
- 点赞
- 收藏
- 关注作者
评论(0)