z

zayyo

V1

2022/09/14阅读:21主题:默认主题

v-model的详细讲解

v-model是什么?

v-model 是Vue框架的一种内置的API指令,本质是一种语法糖写法。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

为什么使用v-model?

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理;

什么场景下会使用v-model?

表单提交是开发中非常常见的功能,也是和用户交互的重要手段:比如用户在登录、注册时需要提交账号密码;比如用户在检索、创建、更新信息时,需要提交一些数据; 这些都要求我们可以在代码逻辑中获取到用户提交的数据,我们通常会使用v-model指令来完成

示例:v-model的基本使用 在这里插入图片描述

v-model的原理

官方有说到,v-model的原理其实是背后有两个操作:

  1. v-bind绑定value属性的值;
  2. v-on绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;
在这里插入图片描述
在这里插入图片描述

那v-model是双向绑定吗?

是的 你可以用 v-model 指令在表单

分类:

前端

标签:

Vue.js

作者介绍

z
zayyo
V1