v-model的本质
v-model 其实就是一个语法糖，它的背后本质上是包含两个操作
1 v-bind绑定一个value属性
2 v-on指令给当前元素绑定input事件
<body>
<div id="app">
1 v-model双向绑定
<br/>
<input type='text' v-model = 'message' >
<hr />
2 v-bind 实现双向绑定
<br/>
<input type='text' v-bind:value = 'message' v-on:input='valChange' >
<hr />
2 v-bind 第二种写法
<br/>
<input type='text' v-bind:value = 'message' @input="message =$event.target.value" >
<br/>
结果：{{message}}
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好'
},
methods:{
valChange(event){
this.message = event.target.value
}
}
})
</script>
1
<input type='text' v-model = 'message' >
2
<input type='text' v-bind:value = 'message' v-on:input='valChange' >
methods:{ valChange(event){ this.message = event.target.value } }
3
<input type='text' v-bind:value = 'message' @input="message =$event.target.value" >
三种写法效果相同
input绑定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="vue.js"></script> </head> <body> <div id="app"> <label for='male'> <input type='radio' id='male' value='男' v-model='gender'/>男 </label> <label for='female'> <input type='radio' id='female' value='女' v-model='gender' />女 </label> <br/> 您选择的性别是：{{gender}} <hr/> <label for='license'> <input type='checkbox' id='license' v-model='license' > 同意协议 </label> {{license}} <button :disabled='!license'>下一步</button> <hr/> <label for='lanqiu'> <input type='checkbox' value='篮球' id='lanqiu' v-model='hobbies'> 篮球 </label> <label for='zuqiu'> <input type='checkbox' value='足球' id='zuqiu' v-model='hobbies'> 足球 </label> <label for='pingbangqiu'> <input type='checkbox' value='乒乓球' id='pingbangqiu' v-model='hobbies'> 乒乓球 </label> <label for='yumaoqiu'> <input type='checkbox' value='羽毛球' id='yumaoqiu' v-model='hobbies'> 羽毛球 </label> <span v-for="hobby in hobbies" style="color:red;"> {{hobby}} </span> <hr/> 单选 <select v-model='fruit'> <option value='苹果'>苹果</option> <option value='橘子'>橘子</option> <option value='榴莲'>榴莲</option> <option value='葡萄'>葡萄</option> </select> 您选择的水果是：{{fruit}} <hr/> 按ctrl键多选 <select v-model='fruits' multiple> <option value='苹果'>苹果</option> <option value='橘子'>橘子</option> <option value='榴莲'>榴莲</option> <option value='葡萄'>葡萄</option> </select> 您选择的水果是：<span style="color:red;" v-for="fruit in fruits"> {{fruit}} </span> </div> </body> <script> const app = new Vue({ el:'#app', data:{ gender:'', license: false, hobbies:[], fruit:'', fruits:[] }, }) </script> </html>
值绑定
就是动态地给value赋值
input的value值不写死，而是动态绑定
1 写死
<label for='lanqiu'> <input type='checkbox' value='篮球' id='lanqiu' v-model='hobbies'> 篮球 </label> <label for='zuqiu'> <input type='checkbox' value='足球' id='zuqiu' v-model='hobbies'> 足球 </label> <label for='pingbangqiu'> <input type='checkbox' value='乒乓球' id='pingbangqiu' v-model='hobbies'> 乒乓球 </label> <label for='yumaoqiu'> <input type='checkbox' value='羽毛球' id='yumaoqiu' v-model='hobbies'> 羽毛球 </label> <span v-for="hobby in hobbies" style="color:red;"> {{hobby}} </span>
2 用v-bind值绑定
值绑定 <label v-for="item in hobbiesOrigin" :for='item'> <input type='checkbox' v-bind:value='item' v-bind:id='item' v-model='hobbies2'> {{item}} </label> <span v-for="hobby in hobbies2" style="color:red;"> {{hobby}} </span>
hobbiesOrigin:['篮球','足球','乒乓球','台球','高尔夫球']
修饰符
<body> <div id="app"> 修饰符lazy 在失去焦点和回车的才实现变量的更新 <br/> <input v-model.lazy='message' type='text'> {{message}} <hr/> number 会把能转化数字的数字类型转化为number类型 <br/> <input v-model='age' type='text'> 变量类型{{typeof age}} <br/> <input v-model.number='age2' type='text'> 变量类型{{typeof age2}} <hr/> 剥除左右两边的空格 <br/> <input v-model='name' type='text'> 浏览器不会显示空格 {{name}} <br/> <input v-model.trim='name2' type='text'> 浏览器不会显示空格 {{name2}} </div> </body> <script> const app = new Vue({ el:'#app', data:{ message:'', age:'', age2:'', name:'', name2:'' }, }) </script>
