NIKO'S BLOG

浅谈vue指令v-model

v-model实际是一种语法糖

1
<input v-model="text" />

上面的写法等价于:

1
<input :value="text" @input="text = $event.target.value" />

知道这一点在开发中是很重要的。比如 ElementUI 的 switch 组件,如果按照官网的写法用v-model绑定状态,那么当你点击 switch 组件后组件状态会立马变更。而实际开发 switch 组件往往是需要点击后请求接口,拿到接口 response 后再异步改变组件状态的。利用v-model的语法糖原理,可以轻松的做到异步改变状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<el-switch :value="status" @input="handleInput($event)"></el-switch>
</template>

<script>
export default {
data() {
return {
status: true,
}
},
methods: {
input(checked) {
// 模拟异步
setTimeou(() => {
this.value = checked
})
},
},
}
</script>

笔者注

博客内文章若不另外注明,均为原创。转载请注明出处,谢谢。

博客内容主要是对新知识的归纳、总结。记录博客的目的也是为了方便自己日后的巩固复习。欢迎大家提出文章中理解错误的地方,不胜感激。若文章对你有帮助,将是我的荣幸。