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;就是通过微信公众…

break、continue、return

break 程序示例&#xff1a; // 产生一个位于 [1, 100] 范围内的随机数&#xff0c;统计产生 100 所需要的次数 public static void main(String[] args) {// System.out.println(Math.random()); // [0,1)// System.out.println(Math.random() * 100); // [0,100)// Syste…

什么是XSS攻击?什么是SQL注入攻击?什么是CSRF攻击?

XSS攻击、SQL注入攻击和CSRF攻击是三种常见的网络安全威胁&#xff0c;它们分别针对不同的应用层面和安全漏洞。以下是对这三种攻击方式的详细介绍&#xff1a; 1. XSS攻击&#xff08;跨站脚本攻击&#xff0c;Cross-Site Scripting&#xff09; 业务场景&#xff1a; 用户…

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

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

C++设计模式---工厂模式

C中工厂模式是一种创建型设计模式&#xff0c;它允许客户端代码通过调用工厂方法来创建对象&#xff0c;而无需直接使用new运算符实例化具体类。这种模式有助于将类的创建与使用相分离&#xff0c;并且在需要添加新的具体类时可以减少对客户端代码的影响。 工厂模式通常有两种实…

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

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

cocos入门8:向量叉乘

在cocos creator中&#xff0c;向量叉乘&#xff08;Cross Product&#xff09;是一个重要的概念&#xff0c;主要用于3D图形学中的方向计算和法线计算。叉乘的结果是一个垂直于两个输入向量的新向量&#xff0c;其长度等于输入向量围成的平行四边形的面积。以下是对向量叉乘的…

前端多人项目开发中,如何保证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…

WinRAR安装教程

WinRAR安装教程 1. 下载WinRAR 访问官方网站&#xff1a;打开浏览器&#xff0c;访问WinRAR的官方网站&#xff08;如&#xff1a;www.winrar.com.cn&#xff09;。选择版本&#xff1a;根据您的操作系统&#xff08;32位或64位&#xff09;选择合适的WinRAR版本。下载软件&a…

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

旅行社是开展旅游服务业务的专项经济主体&#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上跑一跑,看是否能顺利进行,目标就是训练的过程中没…

【Vue2/3】使用Provide/Inject 依赖注入跨组件通信

历史小剧场 什么东西&#xff0c;都有使用年限&#xff0c;比如大米、王朝。 不同的是&#xff0c;大米的年限看得见&#xff0c;王朝的年限看不见。看不见&#xff0c;却依然存在。对于气数&#xff0c;崇祯是不信的&#xff0c;开始不信。等到崇祯十四年&#xff0c;怕什么来…

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…

go 读取json文件内容,并且解析内容到interface、 map、 struct

1&#xff0c;解析到interface、 map func ReadAllFileContent(fileName string) {file, err : os.Open(fileName)if err ! nil {log.Fatal(err)}defer file.Close()// buf : make([]byte, 2024)data, err : ioutil.ReadAll(file) //读取的结果是[]byte类型if err ! nil {log.…

第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…