<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单绑定</title> </head> <body> <form id="box"> <!--v-model 绑定p标签，让input 输入值同步到p标签--> <!-- <input type="text" v-model="message" placeholder="edit me"> <textarea v-model="message" placeholder="add multiple lines"></textarea> <p>Message is:{{message}}</p> 多选框 input:checkbox <input type="checkbox" id="check" v-model="checked"> <label for="check">{{checked}}</label> <!-- checked值将在ture和false之间切换。 </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ message:'aaaaa', checked:true, } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框</title> </head> <body> <form id="box"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ checkedNames:[], //每个checkbox加上value后，其值就不是true和false了，而是value。 } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选框</title> </head> <body> <form id="box"> <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> </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ picked:[] } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选框</title> </head> <body> <form id="box"> <select v-model="selected" multiple="multiple"> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ selected:[] } //multiple 选出来的是一个数组。 }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框</title> </head> <body> <form id="box"> <input type="checkbox" id="jack" v-bind:true-value="a" v-bind:false-value="b" v-model="toggle"> <label for="jack">Jack</label> <p>{{toggle}}</p> </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:'#box', data:{ toggle:'', a:'选中', //每个checkbox加上value后，其值就不是true和false了，而是value。 b:'未选中' } }) // 因为toggle在选中和取消选中时会在true和false之间来回切换，v-bind:true-value="a"就是说当切换到true的时候，让toggle的值等于动态数据a </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>radio单选</title> </head> <body> <form id="box"> <input type="radio" v-model="toggle" v-bind:value="a" checked="checked" > <input id="togg" type="radio" v-model="toggle" v-bind:value="b"> <p>{{toggle}}</p> <input v-model.lazy="msg"> <p>{{msg}}</p> <input v-model.number="age"> <p>{{age}}</p> <input v-model.trim="msgg"> <p>{{msgg}}</p> </form> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ toggle:[], a:'选中的a', b:'选中的b', msg:'当input一输入值，视图就有了变化。有时候你不想这么高度同步，而是等输入完了，视图再变化，可以这样写：', age:'如果你想让输入的数据自动转化为数字的话，可以这样写：', msgg:'自动去除字符串首尾空格。trim这个方法jquery有，原生的js却没有。' } }) </script> </html>