Vue 框架早已经不是 MVVM(Mode-View-View-Model) 双向绑定了。早在 Vue 1.0 时代,Vue 在刚出世的时候的确是 MVVM 双向绑定。自 Vue 2.0 以来,Vue 就不再是双向绑定了,而是像 React 一样是单向绑定 MV(Model-View)了。但是,在 Vue 中仍保留了双向绑定的接口,v-model 就是。
1. 基本用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<template>
<div id= "app" >
<input v-model= "x" >
{{x}}
</div>
</template>
<script>
export default {
data(){
return {
x: 'init'
}
}
}
|
在 JS 中修改 x 的值,input 输入框里也会随之改变。同样地,在页面中的 input 输入框内手动输入值,变量 x 的值也会随之改变。对象里的变量改变会影响视图的 input 的改变,视图中 input 的改变会影响对象里变量 x 值的改变。这就是双向绑定(Model-View-View-Model)。
2. v-model
实质上述使用 v-model 的代码等价于如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div id= "app" >
<input :value= "x" @input= "x = $event.target.value" >
{{x}}
</div>
</template>
<script>
export default {
data(){
return {
x: 'init'
}
}
}
</script>
|
v-model 帮我们做的事就是,为 input 的 value 值设置一个动态绑定,然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。因此 v-model 实质是上述方式的语法糖。
$event 是原生 DOM 事件里的 event 事件对象。
3. v-model 的修饰符
所有修饰符都是起一个辅助的作用,其实可以在函数里自己判断条件实现。.lazyv-model 默认监听的是输入框的input 事件,原生 DOM 的input 事件就是记录实时的输入变化值。但是,我们有时不需要实时记录结果,只需要记录最终输入的结果值就可以了。
input 的原生 DOM 事件中还有一个change 事件,该事件是在输入框失去焦点时 或 按下回车键时 执行的。v-model 里以.lazy 修饰符的方式切换至该监听模式。
1
2
3
4
5
6
7
8
9
10
11
|
<template>
<div id= "app" >
<input v-model.lazy= "x" >
{{x}}
</div>
</template>等价于:<template>
<div id= "app" >
<input :value= "x" @change= "x = $event.target.value" >
{{x}}
</div>
</template>
|
.number.number修饰符是在输入内容改变后进行变量赋值时,自动使用 parseFloat() 函数将其变成数字。使用该修饰符时变量的初始值必须是数字。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div id= "app" >
<input v-model.number= "x" >
{{x}}
</div>
</template>
<script>
export default {
data(){
return {
x: 0
}
}
}
</script>
|
- .trim
.trim修饰符是将输入的内容改变后进行变量赋值时,自动忽略和去除前后的空格。更为精准地记录输入的字符串内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<div id= "app" >
<input v-model.trim= "x" >
{{x}}
</div>
</template>
<script>
export default {
data(){
return {
x: 'init'
}
}
}
</script>
|
4. 自定义输入框的 v-modelv-model
的基本用法仅仅适用于原生的输入框元素 ,对于用户自己封装的输入框,可以用如下方式使用 v-model。当用在组件上时,v-model 的实质如下:
1
2
3
4
5
|
<custom-input v-model= "x" ></custom-input>
等价于:
<custom-input :value= "x" @input= "x = $event" ></custom-input>
|
因此,在自定义表单组件里的写法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<template>
<div class= "wrapper" >
<input :value= "value" @input= "$emit('input', $event.target.value)" >
</div>
</template>
<script>
export default {
props: {
value: {
type: String
}
}
}
</script>
<style scoped>
.wrapper{
border: 2px solid blue;
display: inline-block;
}
.wrapper input{
color: red;
}
</style>
<template>
<div id= "app" >
<MyInput v-model= "x" />
{{x}}
</div>
</template>
<script>
import MyInput from './components/MyInput'
export default {
data(){
return {
x: 0
}
},
components:{
MyInput
}
}
</script>
|
补充:若想在自定义组件里面的原生输入框也使用 v-model,可以根据组件 v-model 的实质,使用计算属性的赋值方式为=使用。
以上就是Vue 的 v-model用法实例的详细内容,更多关于vue v-model的资料请关注服务器之家其它相关文章!
原文链接:https://juejin.cn/post/6896297835886002184?utm_source=tuicool&utm_medium=referral%3Futm_source%3Dtuicool&utm_medium=referral