Vue中使用v-model指令来实现表单元素和数据的双向绑定。
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="msg"> {{msg}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '你好'
}
})
</script>
v-model原理
v-model其实是一个语法糖,本质上包含两个操作:
- v-bind绑定一个value属性
- v-on指令给当前的元素绑定input事件
<input type="text" v-model="msg">
<!-- 等同于 -->
<input type="text" :value="msg" @input="msg = $event.target.value"> {{msg}}
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>
let app = new Vue({
el: '#app',
data: {
msg: '你好',
sex: '男'
}
})
</script>
v-model:checkbox
复选框分两种情况:单个勾选框和多个勾选框
单个勾选框:
- v-model即为布尔值
- 此时input的value并不影响v-model的值
多个复选框:
- 因为可以选中多个,所以对应的data中的属性是一个数组
- 当选中某一个时,就会将input的value添加到数组中
<div id="app">
<!-- CheckBox单选框 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree"> 同意协议
</label>
<h2>您选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<!-- CheckBox多选框 -->
<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="ping-pong">
<input type="checkbox" id="ping-pong" value="乒乓球" v-model="hobbies">乒乓球
</label>
<label for="badminton">
<input type="checkbox" id="badminton" value="羽毛球" v-model="hobbies">羽毛球
</label>
<h2>您选择的是:{{hobbies.join()}}</h2>
<!-- 值绑定 -->
<label v-for="(item, index) in originHobbies" :for="index">
<input type="checkbox" :value="item" :id="index" v-model="hobbies1">{{item}}
</label>
<h2>您选择的是:{{hobbies1.join()}}</h2>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '你好',
isAgree: false, // 单选框
hobbies: ['篮球', '乒乓球'], // 多选框
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '网球', '台球'], // 值绑定
hobbies1: ['网球']
}
})
</script>
v-model:select
和checkbox一样,select也分单选和多选
单选:只能选中一个值
- v-model绑定一个值
- 当选中option中的一个时,会将它对应的value赋值到定义的属性中
多选:可以选中多个值
- v-model绑定一个数组
- 当选中多个值时,会将选中的option对应的value添加到数组中
<div id="app">
<!-- 1、选择一个 -->
<select v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="草莓">草莓</option>
<option value="芒果">芒果</option>
<option value="橙子">橙子</option>
</select>
<h2>您选择的水果是:{{fruit}}</h2>
<!-- 2、选择多个 -->
<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 app = new Vue({
el: '#app',
data: {
msg: '你好',
fruit: '芒果',
fruits: []
}
})
</script>
修饰符
lazy修饰符
- 默认情况下,v-model默认是在input事件中同步输入框的数据
- 也就是一旦有数据发生改变对应的data中的数据层就会自动发生改变
- lazy修饰符可以让数据在失去焦点或会车时更新数据
number修饰符
- 默认情况下,在输入框中无论输入的是字母还是数字都会被当做字符串进行处理
- 但如果希望处理的是数字类型,那么最好直接将内容当做数字处理
- number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符
- 如果输入的内容首尾有很多空格,通常希望将其去除
- trim修饰符可以过滤内容左右两边的空格
<div id="app">
<!-- 1、修饰符 lazy -->
<input type="text" v-model.lazy="msg">
<h2>内容:{{msg}}</h2>
<!-- 2、修饰符 number -->
<input type="number" v-model.number="num">
<h2>数字:{{num}} 类型:{{typeof num}}</h2>
<!-- 3、修饰符 trim -->
<input type="text" v-model.trim="msg1">
<h2>内容:--{{msg1}}--</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '你好',
num: 44,
msg1: ''
}
})
</script>