Vue（十八）v-model在表单中的应用

已于 2022-04-30 22:57:42 修改
阅读量173 收藏
点赞数
分类专栏： vue 文章标签： 前端
于 2022-03-17 22:03:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51571870/article/details/123560217
版权
本文详细介绍了Vue.js中v-model在表单控件中的应用，包括它如何处理不同类型的输入元素，如text、radio和checkbox。v-model不仅能收集value值，还能配合不同的修饰符实现懒加载(lazy)、数字转换(number)和空格修剪(trim)功能。文章通过实例展示了v-model在处理checkbox时的特殊情况，以及在不提交表单情况下的应用。
摘要由CSDN通过智能技术生成

总结：

1、v-model收集的是value值，输入类标签不需要手动添加添加value属性，如 type=‘text’等

2、非输入类标签需要手动添加value属性，如 type=‘radio’，type=‘checkbox’等

3、若<input type="checkbox">

①没有配置value属性，收集的是checked(勾选or未勾选，收集的是布尔值)

②配置了vlaue属性

a、若v-model 的初始值是非数组，那么收集的是checked(勾选or未勾选，收集的是布尔值)

b、v-model的初始值是数组，收集的是vlaue组成的数组，一般情况下v-model初始值定为数组

4、v-model三个修饰符

①lazy:懒加载，失去焦点时再收集数据

②number:输入字符串转为有效的数字

③trim :去除首尾的空格

5、表单不提交

案例

结果展示

最低0.47元/天 解锁文章
weixin_51571870
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定v-model实现表单数据双向绑定问题
10-18
在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新能够即时反映到用户界面上。 在传统的`v-model`使用中，我们通常直接在表单...
Vue---表单应用
weixin_51345632的博客
09-04 1985
v-model指令可以在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会忽略所有表单元素的 value、checked、selected以及attribute的初始值而总是将 Vue 实例的数据作为数据来源。所以在写vue表单应用时在vue组件的 data 选项中声明初始值。 常见表单控件： 1. 单行文本框 <inputtype="text"v-model="user.username" placeholder=..
Vue.js：使用v-model创建单选和多选下拉列表
零小唬的博客
01-11 1605
Vue.js：使用v-model创建单选和多选下拉列表
在Vue 3中使用v-model来构建复杂的表单
粉丝们务必加入微信粉丝群
08-12 1612
v-model指令可以在表单输入元素上实现双向数据绑定，比如input元素、textarea元素和select元素等等。它以两种方式处理数据更新:当输入的值发生变化时，v-model会将该值反映到组件内部的状态当组件的状态发生变化时，v-model会将变化反映到表单输入元素上默认情况下，v-modelinput和textarea对应value属性和input事件checkboxes和radio对应checked属性和change事件select对应value属性和change事件。...
Vue表单输入绑定(元婴中期)
LuckFairyLuckBaby的博客
09-12 483
表单输入绑定 基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 v...
Vue表单输入绑定
冲出仁川，走出马德里，故事还会再继续
07-13 732
文章目录1、简介2、单行文本输入框3、多行文本输入框4、复选框5、单选按钮6、选择框7、值绑定7.1 复选框7.2 单选按钮7.3 选择框的选项8、实例：用户注册 1、简介   表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框 <!DOCTYPE html> <html> <head&gt
填坑记录之Vue中v-model与:model区别
01-20
初做vue项目中遇到这个问题，记录一下。 源代码： 打算做的表单验证功能。结果发现在验证的过程中username规则的第一条正确了却一直通过不...正确的做法应该将form标签中v-model改为 :model，这样在子组件中才可以获
vue中v-model的应用及使用详解
08-27
下面是v-model在Vue中的应用和使用详解： v-model的基本使用 v-model是一个语法糖，它将：value和@input 绑定到一起，实现了数据的双向绑定。例如：<input v-model="test"> 等同于：$event.target.value">。 v-...
Vue v-model组件封装(类似弹窗组件)
10-15
`v-model` 是 Vue 中的一个核心特性，主要用于双向数据绑定，通常用于表单元素如 input、textarea 等。然而，Vue 也允许开发者将 `v-model` 应用于自定义组件，以实现更复杂的交互。 在标准的 `v-model` 使用中，`v...
vue 表单之通过v-model绑定单选按钮radio
10-17
在Vue中，`v-model`用于在组件和Vue实例的数据之间建立双向绑定。对于单选按钮，我们可以直接将其`value`属性与`v-model`所指向的数据属性关联起来。以下是一个基本的示例： ```html ...
Vue中 v-model在表单中的使用详解
qq_44544273的博客
04-15 552
在vue中,作者提供了很多方便的指令便于开发者使用,其中v-model--数据双向绑定在vue的开发中算是最为常用的一个指令.
浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
热门推荐
很多时候犯错都是在不知情的情况下发生的
08-19 2万+
vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果:  输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的...
使用vue的v-model实现类型表单元素组件
Kuyin328178972的博客
01-10 542
v-model:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突。下面是我基于v-mode实现与表单元素同样功能的组件。   &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;he...
V-model详解
qq_41281195的博客
08-23 1694
是 Vue.js 中的一个指令，用于在表单控件或组件上创建双向数据绑定。它可以自动监听用户输入事件并同步更新数据，也可以监听数据变化并更新表单控件的值。假设现在有这样一个需求，就是子组件中有多个input，需要在父组件中指定每一个input绑定的value如何实现。v-model的双向数据绑定的本质是做了两件事，首先绑定数据v-bind,然后绑定更新事件。这些计算属性用于在组件和其父组件之间创建双向数据绑定。这些计算属性用于在组件和其父组件之间创建双向数据绑定。的事件，并将新的值作为参数传递给父组件。
v-model表单
凉茶铺的博客
01-18 1180
介绍了v-model表单属性的双向数据绑定
VUE初学--表单输入与v-model
qq_42970981的博客
12-13 1074
1、基本用法 1、v-modle 在input的基本用法 表单控件在实际业务需求中运用是非常常见，比如，输入框、下拉框、多选、单选等，一般常见于，用户登录注册等，用他们完成数据录入，校验，提交等 Vue提供了 v-model 指令在表单元素上创建 双向数据绑定 他会根据控件类型自动选取正确的方法来更新元素 <div id="app"> <input type="text" ...
Vue之表单与v-model
woshierdanya的博客
07-26 852
课程大纲 （1）v-model基本用法 （2）单选框/按钮 （3）复选框/多选按钮 （4）下拉选择列表 （5）表单输入绑定修饰符 v-model基本用法 表单控件在实际业务较为常见，比如单选、多选、下拉菜单、输入框等，用他们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据 例如：在输入框上使用时，输入的内容会实时映射到绑定的数据上 对于文本域tex...
Vue学习篇(八)—表单绑定
云澈的博客
07-20 417
用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 在表单的使用
qq_42451776的博客
08-15 279
<div id="app"> <div> <h2> 1. 指定value </h2> 下拉单选框 <select v-model="isCheck2"> <option value="A">A</option> &l...
vue中v-model属性
最新发布
05-15
在Vue中，v-model是一种实现表单输入和应用状态之间双向绑定的常用方式。它会根据不同的表单元素类型自动选择正确的方法来更新应用程序状态。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源[^1]。 例如，在一个文本框中，你可以使用v-model将文本框的值绑定到Vue实例的一个变量上，这样当用户输入文本时，变量的值会自动更新，反之亦然。示例代码如下所示： ```html <template> <div> <input type="text" v-model="message"> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } } } </script> ``` 在这个例子中，我们使用v-model将文本框的值绑定到`message`变量上，并将`message`的值显示在页面上。 除了文本框，v-model同样可以用于实现单选按钮、复选框、下拉列表等表单元素的双向绑定。例如，你可以使用v-model在下拉列表中选择一个选项，并将选择的值绑定到Vue实例的一个变量上，如下所示： ```html <template> <div> <select v-model="selected"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> <p>你选择的水果是：{{ selected }}</p> </div> </template> <script> export default { data() { return { selected: 'apple' } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值