十三 v-model双向绑定
1. 原理:
v-model 其实就是一个语法糖,它的背后本质上包含两个操作:
1. v-bind绑定一个value属性
2. v-on指定给当前元素绑定input事件
也就是下面的代码 : 等同于下面的代码
<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery/vue.JS"></script> </head> <body> <!-- v-model 其实就是一个语法糖,它的背后本质上包含两个操作: 1. v-bind绑定一个value属性 2. v-on指定给当前元素绑定input事件 --> <div id="app"> <!-- <input type="text" v-model="message"> --> <!-- <input type="text" :value="message" @input="valueChange"> --> <input type="text" :value="message" @input="message = $event.target.value"> <span> {{ message }} </span> </div> <script> const app = new Vue({ el: "#app", data: { message: "Hellow World" }, methods: { valueChange(event){ //console.log('----'); this.message = event.target.value; } } }); </script> </body> </html>
2. v-model和radio的使用
<div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> <h2>选择的性别:{{sex}}</h2> </div> <script> const app = new Vue({ el: "#app", data: { message: "Hellow World", sex: '女' } }); </script>
3. v-model和checkedbox使用
<div id="app"> <!-- checked单选框 --> <label for="agree"> <input type="checkbox" id="agree" v-model="Isagree">同意协议 </label> <h2>选择的是:{{Isagree}}</h2> <button :disabled="!Isagree">下一步</button> <p></p> <!-- checked多选框 --> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <h2>爱好是:{{ hobbies }}</h2> </div> <script> const app = new Vue({ el: "#app", data: { message: "Hellow World", Isagree: false, hobbies: [] } }); </script>
4. v-model和select的使用
<div id="app"> <!-- 1. 选择一个 --> <select name="abc" v-model="fruit" style="width: 150px;"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="橙子">橙子</option> <option value="葡萄">葡萄</option> <option value="梨子">梨子</option> </select> <h2>你选择的水果是:{{fruit}}</h2> <!-- 2. 选择多个 --> <select name="abcd" v-model="fruits" multiple style="width: 150px;"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="橙子">橙子</option> <option value="葡萄">葡萄</option> <option value="梨子">梨子</option> </select> <h2>你选择的水果是:{{fruits}}</h2> </div> <script> const app = new Vue({ el: "#app", data: { message: "Hellow World", fruit: "香蕉", fruits:[] } }); </script>
5. v-model 修饰符
<div id="app"> <!-- 1. 修饰符:lazy,失去焦点后进行双向绑定 --> <input type="text" v-model.lazy="message"> <h2>{{message}}</h2> <!-- 2. 修饰符:number(默认情况下v-model双向绑定后识别的数据类型为string类型) --> <input type="text" v-model.number="age"> <h2>{{age}}-{{typeof age}}</h2> <!-- 3. 修饰符:trim() ,去除空格--> <input type="text" v-model.trim="name"> <h2>输入的名字{{name}}</h2> </div> <script> const app = new Vue({ el: "#app", data: { message: "Hellow World", age: 0, name: '' } }); </script>