v-model详解
作用:在vue中用于表单的双向绑定。
下面是v-model一个简单的例子
<div id="app">
<label for="">
<input type="text" value="" v-model="message">
</label>
<h1>{{message}}</h1></div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hi"
}
})
</script>
v-model指令实现了data里面的message和input框的实时双向绑定,任何一个发生变化,另一个也会变化,并且网页也会立刻重新解析渲染。
原理:v-model指令的双向绑定可以粗略解析为2步。
1:表单里面的值value是来自data里面的message值。
2:data里的message值是来自表单里面的value值。
分别分析步骤1和步骤2,可以想到
1:v-bind来绑定表单的value属性。
2:用v-on来绑定输入表单时输入的值传给data里面的message。
<label for="">
<input type="text" :value="message" @input="change">
</label>
<h1>{{message}}</h1>
change方法:event浏览器事件触发产生的参数,这里是由input输入时产生
change(event){
this.message=event.target.value;
}
v-model常用用法
单选框(radio)
多个单选框用name或v-model绑定同一个值时都可以实现只能选一个的效果,如果没用name或v-model去绑定同一个值时,那么就可以多选。
<label for="male">
<input type="radio" id="male" value="男" name="sex" v-model="sex">男
</label>
<label for="woman">
<input type="radio" id="woman" value="女" name="sex" v-model="sex">女
</label>
<h1>{{sex}}</h1>
<script>
const app = new Vue({
el:'#app',
data:{
sex:"女"
}
})
</script>
复选框(checkbox)
单个复选框:
<label for="">
<input type="checkbox" value="true" v-model="agree">同意
</label>
<button :disabled="this.agree===false">下一步</button>
<h1>{{agree}}</h1>
同意后下一步这个按钮才能点击
<script>
const app = new Vue({
el:'#app',
data:{
agree:false
}
})
</script>
多个复选框:
<label for="">
<input type="checkbox" value="篮球" v-model="hobby">篮球
<input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
<input type="checkbox" value="台球" v-model="hobby">台球
<input type="checkbox" value="排球" v-model="hobby">排球
<input type="checkbox" value="足球" v-model="hobby">足球
<input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
</label>
<h1>{{hobby}}</h1>
选中复选框后,选中内容(value值会被加到v-model帮的hobby数组中)
<script>
const app = new Vue({
el:'#app',
data:{
hobby:[]
}
})
</script>
多个复选框内容可以用v-for简写:
<label v-for="item in Hobby" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobby2">{{item}}
</label>
<h1>{{hobby2}}</h1>
v-for遍历Hobby数组中的内容,在复选框中展示。选中内容用v-model绑定到hobby2数组中
<script>
const app = new Vue({
el:'#app',
data:{
Hobby:["篮球","足球","羽毛球","台球","乒乓球"],
hobby2:[]
}
})
</script>
下拉框
多选和单选v-model绑定的对象不同
<!--1.选择一个-->
<select name="fruit" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>
<!--2.选择多个-->
<select name="fruits" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>
<script>
const app = new Vue({
el:'#app',
data:{
fruit:"葡萄",
fruits:[],
}
})
</script>
v-model常用修饰符
v-model.lazy
在输入框中输入内容不会立刻绑定到data中,敲击键盘enter后,会绑定上data中
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hi"
}
})
</script>