Vue的基础知识:v-model的原理,由:value与@input合写。

原理:v-model本质上是一个语法糖,比如应用在输入框上,就是value属性input事件的合写。(补充说明:语法糖就是语法的简写)

作用:提供数据的双向绑定

1.数据变,视图(也就是浏览器上的内容)跟着变:value

2.视图变,数据也跟着变@input

注意:$event用于在模版中,获取事件的形参。(对于输入框而言就是e)

下面进行代码演示:

App.vue代码:

<template><div><input v-model="msg1" type="text"> <br><br><!-- 下面这里必须用$event不能用e --><!-- <input :value="msg2" type="text" @input="msg2=e.target.value"> 这是错误的 --><input :value="msg2" type="text" @input="msg2=$event.target.value"></div>
</template><script>
export default {data(){return {msg1:'',msg2:''}}
}
</script>

上述代码说明v-model应用在输入框上就是由:value和@input组成的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[数据集][目标检测]叶子计数检测数据集VOC+YOLO格式240张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;240 标注数量(xml文件个数)&#xff1a;240 标注数量(txt文件个数)&#xff1a;240 标注类别…

2024年谷歌SEO如何快速出排名效果抢占首页制高点?

2024年&#xff0c;随着谷歌搜索引擎算法的不断更新&#xff0c;SEO策略也需要与时俱进才能快速出排名。本文将结合谷歌最新SEO趋势&#xff0c;平哥SEO分享一些实操性的快速排名技巧&#xff0c;帮助你在竞争激烈的搜索结果中脱颖而出。 额外话题&#xff1a;就是通过微信公众…

Java Web学习笔记25——Vue组件库Element

什么是Element&#xff1f; Element: 是饿了么团队研发的&#xff0c;一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。 组件&#xff1a;组成网页的部件&#xff0c;例如&#xff1a;超链接、按钮、图片、表格、表单、分页条等等。 官网&#xff1a;https:…

深拷贝、浅拷贝、引用拷贝

深拷贝和浅拷贝的区别 1. 引用拷贝2. 对象拷贝 1. 引用拷贝 两个对象指向同一个地址值。 创建一个指向对象的引用变量的拷贝Teacher teacher new Teacher("Taylor",26); Teacher otherteacher teacher; System.out.println(teacher); System.out.println(otherte…

前端多人项目开发中,如何保证CSS样式不冲突?

在前端项目开发中&#xff0c;例如突然来了一个大项目&#xff0c;很可能就需要多人一起开发&#xff0c;领导说了&#xff0c;要快&#xff0c;要快&#xff0c;要快&#xff0c;你们给我快。然后下面大伙就一拥而上&#xff0c;干着干着发现&#xff0c;一更新代码&#xff0…

【AI论文与新生技术】Follow-Your-Emoji:精细可控且富有表现力的自由式人像动画技术

我们提出了 Follow-Your-Emoji&#xff0c;这是一种基于扩散的肖像动画框架&#xff0c;它使用目标地标序列对参考肖像进行动画处理。肖像动画的主要挑战是保留参考肖像的身份并将目标表情转移到该肖像&#xff0c;同时保持时间一致性和保真度。为了应对这些挑战&#xff0c;Fo…

JFinal学习07 控制器——接收数据之getBean()和getModel()

JFinal学习07 控制器——接收数据之getBean()和getModel() 视频来源https://www.bilibili.com/video/BV1Bt411H7J9/?spm_id_from333.337.search-card.all.click 文章目录 JFinal学习07 控制器——接收数据之getBean()和getModel()一、接收数据的类型二、getBean()和getModel()…

GDPU JavaWeb Ajax请求

异步请求可以提升用户体验并优化页面性能。 ajax登录 实现ajax异步登录。 注意&#xff0c;ajax用到了jQuery库&#xff0c;先下载好相应的js库&#xff0c;然后复制导入到工程的web目录下&#xff0c;最好与你的前端页面同一层级。然后编写时路径一定要找准&#xff0c;“pag…

转让北京公司带旅行许可证流程和要求

旅行社是开展旅游服务业务的专项经济主体&#xff0c;旅行社开展相关业务必须持有旅行社业务经营许可证。该资质又分为国内旅行社经营许可证和出境旅行社经营许可证。主要区别在于能否开展出境旅游业务&#xff0c;下面老耿带大家了解&#xff0c;新成立国内旅行社要求及出境旅…

python-windows10普通笔记本跑bert mrpc数据样例0.1.001

python-windows10普通笔记本跑bert mrpc数据样例0.1.000 背景参考章节获取数据下载bert模型下载bert代码windows10的cpu执行结果注意事项TODOLIST背景 看了介绍说可以在gpu或者tpu上去微调,当前没环境,所以先在windows10上跑一跑,看是否能顺利进行,目标就是训练的过程中没…

js--hasOwnProperty()讲解与使用

@TOC 前言 hasOwnProperty(propertyName)方法 是用来检测属性是否为对象的自有属性 object.hasOwnProperty(propertyName) // true/false 讲解 hasOwnProperty() 方法是 Object 的原型方法(也称实例方法),它定义在 Object.prototype 对象之上,所有 Object 的实例对象都会继…

6.7 输入输出流

输入&#xff1a;将数据放到程序&#xff08;内存&#xff09;中 输出&#xff1a;将数据从程序&#xff08;内存&#xff09;放到设备中 C的输入输出分为3种形式&#xff1a; 从键盘屏幕中输入输出&#xff0c;称为标准IO 对于磁盘进行标准输入输出&#xff0c;称为文件IO…

第5章 if语句

第5章 if语句 5.1 示例5.2 条件测试5.2.1 检查是否相等5.2.2 检查是否相等时忽略大小写5.2.3 检查是否不相等5.2.4 数值比较5.2.5 检查多个条件5.2.6 检查特定值是否包含在列表中5.2.7 检查特定值是否不包含在列表中5.2.8 布尔表达式 5.3 if 语句5.3.1 简单的if 语句5.3.2 if-e…

硕思闪客精灵(shankejingling)软件最新版下载及详细安装教程

闪客精灵&#xff08;Sothink SWF Decompiler&#xff09;是一款先进的SWF反编译软件&#xff0c;它不但能捕捉、反编译、查看和提取Shock Wave Flash影片&#xff08;.swf和.exe格式文件&#xff09;&#xff0c;而且可以将SWF格式文件转化为FLA格式文件。它能反编译Flash的所…

四天工作制,比你想象的更近了一点

原文&#xff1a;Andrew Keshner - 2024.05.30 软件公司、大型企业甚至警察部门都在试验这一看似遥不可及的概念。 教育软件公司 Kuali 的会议精简&#xff0c;除非绝对必要&#xff0c;员工尽量避免安排会议。即使有会议&#xff0c;也鼓励员工跳过与自己工作无关的部分。在…

从技术到产品:以客户为中心的产品研发之路

一、引言 在快速发展的商业环境中&#xff0c;产品作为连接企业与市场的桥梁&#xff0c;其重要性不言而喻。从摸着石头过河搞产品&#xff0c;到广泛传播NPDP&#xff08;新产品开发流程&#xff09;理念&#xff0c;产品研发的道路经历了从直觉驱动到系统思维的转变。本文将…

ArcGIS for js 4.x 加载图层

二维&#xff1a; 1、创建vue项目 npm create vitelatest 2、安装ArcGIS JS API依赖包 npm install arcgis/core 3、引入ArcGIS API for JavaScript模块 <script setup> import "arcgis/core/assets/esri/themes/light/main.css"; import Map from arcgis…

哈希桶封装unordered_map、unordered_set

哈希桶源代码 我们将由下列的哈希桶来模拟封装STL库中的unordered_map和unordered_set 注意&#xff1a;为了实现封装unordered_map和unordered_set&#xff0c;我们需要对下列源码进行优化。 //哈希桶 namespace hashbucket {template<class K,class V>struct HashNo…

高考作文:时光之河,逐梦前行

时光之河&#xff0c;奔流不息&#xff0c;如同我们的人生旅途&#xff0c;充满了未知与挑战。站在2024年的高考门槛前&#xff0c;我们回望过去&#xff0c;展望未来&#xff0c;心中充满了期待与憧憬。 首先&#xff0c;让我们回顾一下这条时光之河中的点滴。过去的岁月里&am…

区间预测 | Matlab实现QRCNN-BiGRU-Attention分位数回归卷积双向门控循环单元注意力机制时序区间预测

区间预测 | Matlab实现QRCNN-BiGRU-Attention分位数回归卷积双向门控循环单元注意力机制时序区间预测 目录 区间预测 | Matlab实现QRCNN-BiGRU-Attention分位数回归卷积双向门控循环单元注意力机制时序区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实…