目录
1、基本使用
2、实现原理
3、其他类型
1、基本使用
- 使用v-model进行了双向绑定后,不仅修改message可以改变数据,在表单内输入数据message也会被修改。
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '双向绑定'
},
methods: {}
});
</script>
2、v-model实现原理
- v-model == v-bind:value(动态获取message) + v-on:input(实时监听表单是否发生改变)的结合。
- $event.target.value:获取表单内的最新值。
<div id="app">
<input type="text" v-bind:value="message" v-on:input="changeData">
<h2>{{message}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '双向绑定'
},
methods: {
changeData(event){
this.message = event.target.value;
}
}
});
</script>
<!--另一种写法-->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value;">
3、v-model其他类型
3.1、input-radio类型
<div id="app">
<label for="man">
<input type="radio" id="man" v-model="sex" value="男">男
</label>
<label for="woman">
<input type="radio" id="woman" v-model="sex" value="女">女
</label>
<h3>您选择的是:{{sex}}</h3>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
sex: '男'
},
});
</script>
3.2、input-checkbox类型
<div id="app">
<!---单个-->
<label for="agreement">
<input type="checkbox" v-model="isagree" id="agreement">同意协议
</label>
<h2>您的选择是:{{isagree}}</h2>
<button :disabled="!isagree" @click="test" id="btnClick">下一步</button>
<br/>
<!---多个-->
<label for="basketball">
<input type="checkbox" id="basketball" value="篮球" v-model="hobbies">篮球
</label>
<label for="football">
<input type="checkbox" id="football" value="足球" v-model="hobbies">足球
</label>
<label for="baseball">
<input type="checkbox" id="baseball" value="棒球" v-model="hobbies">棒球
</label>
<label for="Run">
<input type="checkbox" id="Run" value="跑步" v-model="hobbies">跑步
</label>
<h2>您的爱好:{{hobbies}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isagree: false,
hobbies:[]
},methods: {
test(){
//防止从开发者中删掉disabled
if(this.isagree == false){
document.getElementById("btnClick").disabled = true;
}else{
alert("success");
}
}
}
});
</script>
3.3、select
<div id="app">
<!--单选-->
<select v-model="fruit">
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="榴莲">榴莲</option>
<option value="橙子">橙子</option>
</select>
<h2>您选择的水果是:{{fruit}}</h2>
<!--多选-->
<select v-model="fruits" multiple>
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="榴莲">榴莲</option>
<option value="橙子">橙子</option>
</select>
<h2>您选择的水果种类:{{fruits}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
fruit : '香蕉',
fruits: []
},
});
</script>
3.4、值绑定(动态绑定value)
- 就是先定义好一堆值,再在html内遍历出来,这样更加高级,是动态的输出,根据传入的数据显示出不同的数据。
- 数据不是写死的,有利于复用。
<div id="app">
<h2>您的爱好:{{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<!--在input内循环,{{item}}输出失败-->
<input type="checkbox" v-model="hobbies" :value="item" :id="item">{{item}}
</label>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
hobbies:[],
originHobbies: ['篮球','足球','棒球','乒乓球','橄榄球','高尔夫球']
}
});
</script>
3.5、v-model修饰符
- lazy:只有敲回车或者失去焦点时,进行值改变,使用lazy可以修改值不那么频繁。
- number:设置数据为number类型。
- trim:去除空格。
<div id="app">
<label for="username">
<!--lazy:只有在敲回车或者失去焦点时才会进行赋值-->
用户名:<input id="username" type="text" v-model.lazy="Username">
</label>
<h2> 用户名:{{Username}}</h2>
<label for="age">
<!--
number:将数据转换成number类型(数字),只有纯数字才会转换
但开始输入数字,后面输入字符时为number类型,失去焦点非数字数据消失,类型还是设置number好
-->
年龄:<input id="age" type="number" v-model.number="Age">
</label>
<h2>年龄:{{Age}}========={{typeof Age}}</h2>
<label for="password">
<!--去除前后空格-->
密码:<input id="password" type="text" v-model.trim="Password">
</label>
<h2>密码:{{Password}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
Username: '',
Age: 20,
Password: ''
},
});
</script>