第六章 表单与v-model
6.1 基本用法
v-model指令,用于在表单元素上双向绑定数据。在输入框上使用示,输入的内容会实时映射到绑定的数据上。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.1 基本用法</title> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="输入...."> <p>输入的内容是:{{message}}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app=new Vue({ el:"#app", data:{ message:"" } }) </script> </body> </html>
6.1.1 单选按钮
v-bind:checked="布尔值"即可
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>6.2 单选按钮</title> </head> <body> <div id="app"> <input type="radio" v-bind:checked="picked"> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { picked: true } }) </script> </body> </html>
组合互斥效果,需要使用配合v-model配合input的value选项,当v-model绑定的值和value一样时,选中。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
6.1.2 复选框
单独使用需要和v-model配合使用,单选按钮单独使用只需要v-bind一个布尔值即可。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.2 复选框</title> </head> <body> <div id="app"> <input type="checkbox" v-model="checked" id="checked"><label for="checked">选择状态:{{checked}}</label> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el:"#app", data:{ checked:false } }) </script> </body> </html>
组合使用,和单选按钮组合使用一样,需v-model和value配合使用,多个复选框绑定到一个数组类型的数据,当value的值在数组中,则选中该项,这一过程也是双向的。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.2 复选框</title> </head> <body> <div id="app"> <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label><br> <input type="checkbox" v-model="checked" value="js" id="js"><label for="css">JS</label><br> <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">css</label><br> <input type="checkbox" v-model="checked" value="html5" id="html5"><label for="html5">HTML5</label><br> <p>选中的项有:<b v-if="checked.length>0">{{checked}}</b></p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { checked: [] } }) </script> </body> </html>
6.1.3 下拉选择器
单选时,如果option含有value属性,则v-model优先匹配value值,没有则匹配option的text
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.3下拉选择</title> </head> <body> <div id="app"> <select name="" v-model="selected" id=""> <option value="html">html</option> <option>js</option> <option value="css">css</option> </select> <p>选择的项是:{{selected}}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app=new Vue({ el:"#app", data:{ selected:"", } }) </script> </body> </html>
多选时,给selected添加multiple选项,同时给v-model绑定一个数组,与复选框类似
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.3下拉选择</title> </head> <body> <div id="app"> <select name="" v-model="selected" multiple> <option value="html">html</option> <option>js</option> <option value="css">css</option> </select> <p>选择的项是:{{selected}}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app=new Vue({ el:"#app", data:{ selected:[], } }) </script> </body> </html>
在业务中,option选项常用v-for输出,value和text也用v-bind来动态输出
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>6.1.4 动态输出下拉选择</title> </head> <body> <div id="app"> <select v-model="selected" multiple> <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option> </select> <p>选择的项是:{{selected}}</p> <script src="../vue.min.js"></script> </div> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { selected: [], options: [ {value: "js", text: 'js'}, {value: "css", text: 'css'}, {value: "html", text: 'html'}, {value: "html5", text: 'html5'} ] } }) </script> </body> </html>
6.2 绑定值
用v-bind动态给单选按钮,复选框,下拉选项绑定数据
6.2.1 单选按钮
在选中时,app.picked===app.value,都是123
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.2.1 动态绑定之单选按钮</title> </head> <body> <div id="app"> <input type="radio" v-model="picked" v-bind:value="value"><label for="">单选按钮</label> <p>{{picked}}</p> <p>{{value}}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app=new Vue({ el:"#app", data:{ picked: false, value:123 } }) </script> </body> </html>
6.2.2 复选框
当勾选时,app.toggle===app.value1,未勾选时app.toggle===app.value2
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>6.2.2 动态绑定之复选框</title> </head> <body> <div id="app"> <input type="checkbox" v-model="toggle" v-bind:true-value="value1" v-bind:false-value="value2"><label for="">复选框</label> <p>{{toggle}}</p> <p>{{value1}}</p> <p>{{value2}}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { toggle: false, value1: 'A', value2: 'B' } }) </script> </body> </html>
6.2.3 选择列表
当勾选时,app.selected是一个object,所以app.selected.number===123
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>6.2.2 动态绑定之选择列表</title> </head> <body> <div id="app"> <select name="" id="" v-model="selected"> <option v-bind:value="{number:123}">123</option> </select> {{selected.number}} </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { selected: "" } }) </script> </body> </html>
6.3 v-model修饰符
6.3.1 .lazy
在输入框中,v-model默认是在input事件中同步输入框的数据,使用修饰符.lazy会转变为在change事件中同步
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.3.1 .lazy修饰符</title> </head> <body> <div id="app"> <input type="text" v-model.lazy="message"> <p>{{ message }}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { message: "" } }) </script> </body> </html>
6.3.2 .number
可以将输入转换为Number类型,否则输入的虽然是数字,但它的类型其实是string
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.3.1 .number修饰符</title> </head> <body> <div id="app"> <input type="number" v-model.number="message"> <p>{{ typeof message }}</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el:"#app", data:{ message:123 } }) </script> </body> </html>
6.3.3 .trim
可以过滤输入首尾空格
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>6.3.3 .trim修饰符</title> </head> <body> <div id="app"> <input type="text" v-model.trim="message"> <p>-->{{message}}<--</p> </div> <script src="../vue.min.js"></script> <script type="application/javascript"> var app = new Vue({ el: "#app", data: { message: "" } }) </script> </body> </html>