Vue中v-model基本使用
2021-01-23 本文已影响0人
SleepWalkerLj
一，v-model是什么？
<body>
<div id="app">
<input type="text" v-model="msg">
<h2>{{msg}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello',
}
})
</script>
</body>
结果：
输入了 world
二，作用
Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。
- 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
- 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。
三，原理
v-model本质上是个语法糖，其实现原理包含两个步骤
- 通过v-bind绑定一个value属性
- 通过v-on指令给当前元素绑定input事件
<input type="text" :value="msg" v-on:input="msg=$event.target.value">
v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息
四，类型
除了上面的文本类型，v-model还能结合其他类型使用
1. v-model：radio
<div id="app">
<!--当v-model绑定的是同一个变量，可以不加name属性来实现radio的互斥-->
<label for="right">
<input type="radio" id="right" name="judge" value="对" v-model="judge">对
</label>
<label for="wrong">
<input type="radio" id="wrong" name="judge" value="错" v-model="judge">错
</label>
<h2>你的判断是：{{judge}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
judge:'对' //目的：选择之后将值绑定到judge中
}
})
</script>
结果：
默认是对
选择错
2. v-model：checkbox
单个复选框
<div id="app">
<label for="ok">
<input type="checkbox" id="ok" v-model="isOk">可以
</label>
<h4>{{isOk}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
isOk:false
}
})
</script>
结果：
默认false
选中之后
多个复选框
<div id="app">
<input type="checkbox" value="香蕉" v-model="fruits">香蕉
<input type="checkbox" value="苹果" v-model="fruits">苹果
<input type="checkbox" value="梨子" v-model="fruits">梨子
<h4>爱吃的水果是：{{fruits}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
fruits:[]
}
})
</script>
结果：
选择了香蕉和苹果
3. v-model：select
<div id="app">
<select name="" id="" v-model="type">
<option value="电影">电影</option>
<option value="动漫">动漫</option>
<option value="电视剧">电视剧</option>
</select>
<h4>喜欢的视频类型是：{{type}}</h4>
</div>
<script>
new Vue({
el:'#app',
data:{
type:'动漫'
}
})
</script>
结果：
默认为动漫
选择了电视剧
五，修饰符
1. lazy
v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新
<input type="text" v-model.lazy="msg">
2.number
默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。
<input type="text" v-model.number="msg">
3.trim
trim修饰符可以去掉从输入框获取的内容的左右两边的空格
<input type="text" v-model.trim="msg">
