Day18——v-model双向绑定
文章目录
- 一. 回顾
- 二. v-mode双向绑定
- 2.1 v-model的基本使用
- 2.2 v-model的原理
- 2.3 v-model结合radio类型
- 2.4 v-model结合checkbox类型
- 2.5 v-model结合select类型
- 2.6 v-model修饰符的作用
- 2.7 总结
一. 回顾
前面学习了Day17——JavaSrcipt高阶函数的使用，今天学习v-model双向绑定
二. v-mode双向绑定
2.1 v-model的基本使用
语法：v-model="变量"
例子：
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
script>
body>
2.2 v-model的原理
其实v-model是一个语法糖。它实际包含两个操作：
- 使用v-bind绑定一个value属性
- 使用v-on给当前元素添加一个input事件
<body>
<div id="app">
<input type="text" :value="message" @input="message = $event.target.value">
{{message}}
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
valueChange(event){
this.message = event.target.value;//发生事件的元素的值 赋给 message变量
}
}
})
script>
body>
2.3 v-model结合radio类型
<body>
<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 src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
sex: ''
}
})
script>
body>
2.4 v-model结合checkbox类型
<body>
<div id="app">
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意协议
label>
<h2>您的选择是{{isAgree}}h2>
<button :disabled="!isAgree">下一步button>
<br>
<br>
<br>
<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>
<br>
<label v-for="item in originHobbies" for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
label>
<h2>您的爱好是{{hobbies}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isAgree: false, //单选框对应布尔值
hobbies: [], //多选框对应数组
originHobbies: ['篮球', '足球', '羽毛球', '乒乓球'],
}
})
script>
body>
效果：
2.5 v-model结合select类型
例子：
<body>
<div id="app">
<select name="fruit" id="fruit" v-model="fruit">
<option value="苹果" >苹果option>
<option value="香蕉" >香蕉option>
<option value="榴莲" >榴莲option>
<option value="荔枝" >荔枝option>
select>
<h2>您的选择是：{{fruit}}h2>
<br>
<select name="fruits" id="fruit2" v-model="fruits" multiple>
<option value="苹果" >苹果option>
<option value="香蕉" >香蕉option>
<option value="榴莲" >榴莲option>
<option value="荔枝" >荔枝option>
select>
<h2>您的选择是：{{fruits}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fruit: '苹果', //设置值，表示默认选中value=‘苹果’
fruits: [],
}
})
script>
body>
2.6 v-model修饰符的作用
| 修饰符 | 作用 |
|---|---|
| lazy | v-model默认在input事件中同步输入框的数据，即一旦数据发生变化，vue实例的data属性中的数据也会自动发生改变。lazy的作用就是只有当失去焦点或者按下回车键时才会更新 |
| number | 在输入框中无论输入数字还是字符串，都会被当作字符串进行处理。如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理。number的作用就是 将输入框的内容自动转换成数字类型 |
| trim | 作用是 将输入的内容的首尾若干个空格都去除 |
例子：
<body>
<div id="app">
<input type="text" v-model.lazy="message">
<h2>{{message}}h2>
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}h2>
<input type="text" v-model.trim="name">
<h2>您输入的名字是：{{name}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
age: 0,
name: '',
}
})
script>
body>
2.7 总结
-
如果绑定的是多个数据，则需要使用数组，即
v-model="xxx"（其中xxx是一个数组类型的变量）；如果绑定的是单个数据，则只需使用一个变量，即v-model="xxx"（其中xxx是一个简单的变量） -
v-model的使用就是，创建一个数组或者简单的变量，触发元素的input事件后，会自动将元素的value属性的值绑定到前面创建好的数组或变量中。