00.radio(单选)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- v-model会将输入框中的value与data中的sex进行双向绑定 --> <input type="radio" value="男" name="sex" v-model="sex">男 <input type="radio" value="女" name="sex" v-model="sex">女 <h2>你选择的性别是:{{sex}}</h2> </div> <script> var app=new Vue({ el:'#app', data:{ sex:'' } }) </script> </body> </html>
01.checkbox(多选)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <label for="agree"> <input type="checkbox" id="agree" v-model="isAgree">同意协议<br/> </label> {{isAgree}}<br/> <button :disabled="!isAgree">下一步</button> </div> <script> var app=new Vue({ el:'#app', data:{ isAgree:false } }) </script> </body> </html>
02.v-model原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> v-on:input动态监听输入的数据，当你在input框中输入数据事，就会触发v-on：input事件 <input type="text" :value="message" v-on:input="show"> <h2>{{message}}</h2> </div> <script> var app=new Vue({ el:'#app', data:{ message:"hello" }, methods:{ show:function(event){ this.message=event.target.value; } } }) </script> </body> </html>
03.值的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 --> 单行文本 <h2>{{message}}</h2> <input type="text" name="username" v-model="message" value=""><hr/> 多行文本 <h2>{{messages}}</h2> <!-- v-model的值就是绑定的变量 --> <textarea name="" id="" cols="30" rows="10" v-model="messages" value=""></textarea><hr/> 多个复选框 <h2>{{checkboxnames}}</h2> <form action=""> <span v-for="item in arr"> {{item}} <input type="checkbox" :value="item" v-model="checkboxnames"> </span> </form><hr/> 单选框按钮 <h2>{{radioboxName}}</h2> <form action=""> <span v-for="item in arr"> {{item}} <input type="radio" :value="item" v-model="radioboxName"> </span> </form><hr/> 单选择框<br/> <h2>{{chooseCity}}</h2> <select name="" id="" v-model="chooseCity"> <option v-for="item in citys">{{item}}</option> </select><hr/> 多选择框 <h2>{{moreCity}}</h2> <!-- multiple多选属性 --> <!-- 注：按住ctrl键多选 --> <select name="" id="" v-model="moreCity" multiple="multiple"> <option v-for="item in citys">{{item}}</option> </select><hr/> 由于v-model绑定的都是字符串，可以通过.number将其改为数字(通过下面的监听测试) <input name="age" type="text" v-model.number="age" value=""/><hr/> 由于v-model 在每次 input 事件触发后将输入框的值与数据进行同步（就是每次输入都会触发，导致效率低），就可以使用.lazy, <!-- lazy:当你输入完才会去触发 --> <input type="text" value="" v-model.lazy="age" name="age"><hr>/ .trim自动过滤用户输入的收尾空白符 <h2>{{overflow}}</h2> <input type="text" v-model.lazy.trim="overflow"> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ message:"小明", messages:"晓红", arr:['Jack','John','Mike'], checkboxnames:[], radioboxName:[], citys:['北京','上海','深圳'], chooseCity:"", moreCity:[], age:16, overflow:"nihao" }, watch:{ age:function(val){ console.log("v-model绑定值由字符串变为数字:"+val); } } }) </script> </body> </html>