一.表单输入绑定
1.数据的双向绑定
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <label for="username">用户名：</label> <input type="text" v-model="msg" id="username"> <p>{{ msg }}</p> <textarea placeholder="add multiple lines" v-model='msg'></textarea> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br> <!--多个复选框 使用列表保存--> <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> <br> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> <!--懒监听--> <input v-model.lazy="msg" > <!--数字显示--> <input v-model.number="age" type="number"> <!--清除前后空格--> <input v-model.trim="msg"> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { msg: 'alex', checked: false, checkedNames: [], selected:'', age:0 } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <input type="text" :value="msg" @input = 'changeHandler'> <p>{{ msg }}</p> </div> <script src="vue.js"></script> <script> //Object.definePropty() new Vue({ el:'#app', data(){ return { msg:'alex' } }, methods:{ changeHandler(e){ this.msg = e.target.value } } }) </script> </body> </html>