草庐IT

3分钟认识Vue3的v-model

米西呀 2023-04-14 原文


文章目录

1:什么是 v-model


v-model 是 Vue 内置的指令
作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中
// 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如:  input  、radio 、checkbox
<template>
	<input v-model='value' />
</template>
// 作为自定义组件的属性
<template>
	<son-component v-model='value'></son-component>
</template>


v-model 同时做了两件事情:属性绑定和自定义事件绑定

// 内置组件
<template>
	<input  type='text' v-model='value' /> 
	// 相当于
	<input type='text'  :value='value' @input='value = $event.target.value'  />
</template>
// 自定义子组件
<template>
	<son-component v-model='value'></son-component>
	// 相当于
	<son-component :modelValue='value' @update:modelValue='value = $event'></son-component>
<template>

v-model 绑定在自定义组件上时,我们需要手动去接收
// 自定义组件
export default{ 
	props: ['modelValue'], // 默认名称为 modelValue
	emits: ['update:modelValue'] // Vue3 新增 emits, 用于接收父组件传递的自定义事件
}



2:v-model 的扩展


1:自定义名称


v-model 默认绑定的属性名为:modelValue

v-model 默认绑定的事件名为:update:modelValue

// 所以我们需要使用 modelValue 和 update:modelValue 来接收
export default {
	props: ['modelValue'],
	emits: ['update:modelValue']
}

我们可以自定义 v-model 绑定的名称

// 父组件
<template>
	<son-component v-model:msg='msg'></son-component> // 使用 v-model:name 来自定义名称
</template>
// 子组件
export default {
	props: ['msg'],
	emits: ['update:msg']
}

注意:以上是 Vue3 中接收 v-model 的方法, Vue2 需要使用 model 来接收



2:内置修饰符


v-model 的修饰符能够对绑定的数据做特定处理

Vue 中有内置的修饰符,如:.number 、.trim 、.lazy

v-model.number : v-model 绑定在表单组件中不会出现数值类型,numer 可以将绑定的字符串转换为数值

v-model.trim : 去掉绑定数据左右两侧的空格

v-model.lazy : 表单组件绑定时生效,从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能

<template>
	<input type='text' v-model.number='value' /> // 将输入的 string 类型转换为 number 类型
	input 本身不管输入的是数字还是单词等都是 string 类型
</template>


3:自定义修饰符


Vue3 中可以通过 v-model.name 自定义修饰符

自定义的修饰符需要在子组件中用 props 接收 modelModifiers 对象,这个对象下面会有自定义属性,值为 true

// 没有重命名v-model,仅添加自定义修饰符
<template>
	<son-component  v-model.a='msg' />
</template>
export default {
	props:['modelValue', 'modelModifiers'],
	emits: ['update:modelValue'],
	created() {
		console.log(this.modelModifiers.a) // 值为 true
	}
}

如果自定义了 v-model 的名称,那么 modelModifiers 要改为 name + Modifiers

// 重命名 v-model ,并且添加自定义修饰符
<template>
	<son-component v-model:msg.a='msg' />
</template>
export default {
	props:['msg', 'msgModifiers'],
	emits: ['update:msg'],
	created() {
		console.log(this.msgModifiers.a) // 值为 true
	}
}

注意:Vue3 中取消了 v-bind 中的 .sync 修饰符


总结

1:v-model 作为指令可以绑定在内置组件和自定义组件上

2:相当于绑定了 :modelValue 和 @update:modelValue ,需要在子组件中接收

3:v-model:name 重命名

4:v-modle.name 自定义修饰符,使用 props 的 Modifiers 接收


作者如果有不准确、错误的希望指出来

没有人希望传递不准确或错误的知识

有关3分钟认识Vue3的v-model的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案,但在Google上花了很多时间,所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中,我有几个模型共享一种特定类型的字符串属性,该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复),但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件,但这只会让验证干给这个特殊的字符串它自己的模型,但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类,但是我如何得到ActiveRecord关联这个类模型

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调,即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中?我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  4. ruby-on-rails - 工厂女孩/Rails : Generator to create a factory for existing model? - 2

    我在我的Rails项目中使用rspec_rails和factory_girl_railsgem。所有模型都已创建。是否有我可以运行的生成器来为现有模型创建工厂文件?例如:我已经有了一个Blog模型。RSpec允许我通过简单地运行以下命令在spec/models/blog_spec.rb生成一个模型规范文件:railsgeneraterspec:modelblog是否有我可以在命令行中运行的生成器,它会为这个现有模型生成工厂文件,位于:spec/factories/blogs.rb?我在factory_girl_rails中没有看到任何关于发电机的提及文档。

  5. ruby-on-rails - ruby rails : two references with different name to the same model - 2

    我的应用程序有一个名为User的模型(它包括电子邮件地址、用户名……)我想创建一个模型Message它应该有两个字段sender和recipient。两者都是对User模型的引用。我试过这个:railsgeneratemodelMessagesender:referencesrecipient:referencesRails生成了这个:classMessage但我不想要两种不同的模型。这两个字段都应引用User。我正在运行Ruby2.0.0和Rails4.0.2。非常感谢任何帮助。如果您需要有关我的问题的更多信息,请询问我。 最佳答案

  6. 三分钟集成 TapTap 防沉迷 SDK(Unity 版) - 2

    三分钟集成Tap防沉迷SDK(Unity版)一、SDK介绍基于国家对上线所有游戏必须增加防沉迷功能的政策下,TapTap推出防沉迷SDK,供游戏开发者进行接入;允许未成年用户在周五、六、日以及法定节假日晚上8:00-9:00进行游戏,防沉谜时间段进入游戏会弹窗进行提示!开发环境要求:Unity2019.4或更高版本iOS10或更高版本Android5.0(APIlevel21)或更高版本🔗Unity集成Demo参考链接🔗UnityTapSDK功能体验APK下载链接二、集成前准备1.创建应用进入开发者后台,按照提示开始创建应用;2.开通服务在使用TDS实名认证和防沉迷服务之前,需要在上面创建的应

  7. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  8. ruby-on-rails - NilClass :Class 的 Rails 未定义方法 `model_name' - 2

    我有一个表单,我想出现在每个页面的顶部,所以我将它包含在/app/views/layouts/application.html.erb文件中,但我收到错误undefinedmethodmodel_name'forNilClass:Class`尝试加载页面时。这是application.html.erb中的表单片段Addnewcontact这是我的/app/controllers/user_controller.rbclassUserController我认为我遇到了这个错误,因为表单位于application.html.erb文件中,我需要以某种方式指定路径,但话又说回来,我对Rail

  9. ruby-on-rails - 应用程序显示错误的小时和分钟 - 2

    起初:那不是错误区域的问题。在irb和数据库中,一切都很好。当我想在我的View中显示日期(created_at、updated_at和所有由我自己在每个模型中定义的日期)时,就会出现问题。我试图在application.rb中设置时区并从初始化程序中删除时间格式,但这并没有解决我的问题。Annotategem生成的架构信息:#created_at:datetime#updated_at:datetime#publish_at:datetime来自irb:1.9.2-p290:004>Time.zone=>(GMT+00:00)UTC1.9.2-p290:005>Time.zone.n

  10. ruby - 如何让 Ruby 每 10 分钟运行一次任务? - 2

    我想每10分钟执行一次cron作业,但我的系统只执行1小时。所以我正在寻找一种方法来做到这一点。我看过Timer和sleep但我不确定如何执行此操作,甚至不知道如何实现此操作。 最佳答案 看看http://rufus.rubyforge.org/rufus-scheduler/rufus-scheduler是一个用于调度代码片段(作业)的Rubygem。它了解在特定时间、在特定时间、每x次或仅通过CRON语句运行作业。rufus-scheduler不能替代cron/at,因为它在Ruby内部运行。

随机推荐