v-model 粗略解析

v-model 粗略解析

v-model是什么?

  • 双向数据绑定,可以从data流向页面,也可以从页面流向data
  • 通常用于表单收集,v-model 默认绑定 value
  • 书写形式: v-model:value=""v-model

v-model原理是什么?

  • v-model本质是一个语法糖
  • 靠v-bind绑定数据
  • oninput数据传递

v-model实现代码

<div id="app">< <!-- 用e的话在事件名后不需要加上()括号 -->我是e方法 <input type="text" :value="val" @input="change"><br><!-- 用event的话需要在事件名后加上()括号 -->我是event方法 <input type="text" :value="val" @input="change-event()" placeholder="我是event"><h1>{{val}}</h1>
</div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return { val: "我是实现原理" }},methods:{change(e){console.log(e);this.val=e.target.value;},change-event(){console.log(event);this.val=event.target.value;},}  })

在这里插入图片描述

e和event的区别

  • 当定义函数()时,接收e,当为形参
  • e自身是某个事件带有的方法;event是window带有的方法
  • e = window.event 兼容

在这里插入图片描述


  • 失联

最后编辑时间 2024,03,13;11:10

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

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

相关文章

界面控件DevExpress ASP.NET Scheduler - 助力快速交付个人信息管理系统(下)

DevExpress ASP. NET Scheduler组件能完全复制Microsoft Outlook Scheduler的样式和功能&#xff0c;具有日、周、月和时间轴视图&#xff0c;并包括内置的打印支持&#xff0c;因此用户可以在尽可能短的时间内交付全功能的个人信息管理系统。在上文中&#xff08;点击这里回顾…

在域控的Users目录下批量创建用户组,名称来自Excel

对于CSV文件&#xff0c;PowerShell可以直接读取并处理&#xff0c;无需额外安装模块。假设你的CSV文件中&#xff0c;用户组名称在第一列&#xff0c;文件名为"groups.csv"&#xff0c;可以使用以下PowerShell脚本来批量创建&#xff1a; # 读取CSV文件中的数据 $g…

OpenCV的常用数据类型

OpenCV涉及的常用数据类型除包含C的基本数据类型,如&#xff1a;char、uchar&#xff0c;int、unsigned int,short 、long、float、double等数据类型外, 还包含Vec&#xff0c;Point、Scalar、Size、Rect、RotatedRect、Mat等类。C中的基本数据类型不需再做说明下面重点介绍一下…

QT----基于QT的人脸考勤系统(未完成)

目录 1 编译opencv库1.1 下载源代码1.2 qt编译opencv1.3 执行Cmake一直卡着data: Download: face_landmark_model.dat 2 编译SeetaFace2代码2.1 遇到报错By not providing "FindOpenCV.cmake" in CMAKE_MODULE_PATH this project has2.2遇到报错Model missing 3 测试…

如何剪辑视频?从入门到精通,轻松驾驭!

“视频怎么剪辑呀&#xff0c;手上有一段视频&#xff0c;但其中只有某个片段是我真正想要的。我想把这个片段单独剪辑出来&#xff0c;做成一个新的视频。有没有什么简单的方法可以实现这个目的&#xff1f;请赐教&#xff0c;感激不尽&#xff01;” 在这个短视频盛行的时代…

vue3上传图片并且支持删除

先做上传组件 <template><!-- --><el-uploadref"uploadRef":headers"headers":action"action":limit"limit":list-type"listType":auto-upload"autoUpload":show-file-list"showFileList&q…

STM32中断和外部中断

NVIC&#xff1a;嵌套中断向量控制器&#xff1a;用于统一分配中断优先级和管理中断 响应式优先级&#xff1a;也可以称为插队式优先级哪个优先级高优先处理哪个 抢占式优先级&#xff1a;优先级高的可以优先被处理&#xff0c;相当于CPU可以暂时中断当前处理的程序&#xff0c…

海豚调度系列之:任务类型——SQL节点

海豚调度系列之&#xff1a;任务类型——SQL节点 一、SQL节点二、创建任务三、任务参数四、任务样例五、运行该任务成功之后在hive中查询结果六、使用前置sql和后置sql示例 一、SQL节点 SQL任务类型&#xff0c;用于连接数据库并执行相应SQL。 二、创建任务 点击项目管理-项…

Windows C++ 使用WinAPI实现RPC

demo下载地址&#xff1a;https://download.csdn.net/download/2403_83063732/88958730 1、创建IDL文件以及acf文件&#xff08;创建helloworld.idl helloworld.acf&#xff09; 其中IDL文件&#xff1a; import "oaidl.idl"; import "ocidl.idl"; [ …

MySQL的事务隔离是如何实现的?

目录 从一个例子说起 快照读和当前读 事务的启动时机和读视图生成的时刻 MVCC 隐藏字段 Undo Log回滚日志 Read View - 读视图 可重复读(RC)隔离级别下的MVCC 读提交(RR)隔离级别下的MCC 关于MVCC的一些疑问 1.为什么需要 MVCC &#xff1f;如果没有 MVCC 会怎样&am…

Python学习笔记-Flask实现简单的抽奖程序(增加图片显示)

1.创建static文件夹,存放图片文件 2.hero列表数据更改为要抽奖的图片名 3.html中可以编写python语句,遍历hero列表内容渲染到表格中 4.在点击随机抽取后,可以获得名称,然后使用img标签,将获取的名称拼接到路径中 3.初始页面,访问127.0.0.1:5000/index 4.点击随机抽取后 5.py…

ResNeXt学习笔记

一、更新了block 二、将block中的卷积层分组 注意&#xff1a;对于block层数小于3的&#xff0c;没有太大作用

AIGC实战——GPT(Generative Pre-trained Transformer)

AIGC实战——GPT 0. 前言1. GPT 简介2. 葡萄酒评论数据集3. 注意力机制3.1 查询、键和值3.2 多头注意力3.3 因果掩码 4. Transformer4.1 Transformer 块4.2 位置编码 5. 训练GPT6. GPT 分析6.1 生成文本6.2 注意力分数 小结系列链接 0. 前言 注意力机制能够用于构建先进的文本…

System Verilog的接口、程序块与断言解析

接口、程序块与断言 1 接口 1.1 使用接口简化连接 // 接口 interface arb_if(input bit clk);logic [1:0] grant,request;logic rst; endinterface// 使用了简单接口的仲裁器 module arb (arb_if arbif);...always(posedge arbif.clk or posedge arbif.rst)beginif(arbif.rs…

opencv dnn模块 示例(25) 目标检测 object_detection 之 yolov9

文章目录 1、YOLOv9 介绍2、测试2.1、官方Python测试2.1.1、正确的脚本2.2、Opencv dnn测试2.2.1、导出onnx模型2.2.2、c测试代码 2.3、测试统计 3、自定义数据及训练3.1、准备工作3.2、训练3.3、模型重参数化 1、YOLOv9 介绍 YOLOv9 是 YOLOv7 研究团队推出的最新目标检测网络…

软件测试中的AI-为什么它在软件自动化测试中很重要?

通俗地说&#xff0c;人工智能&#xff08;AI&#xff09;是计算机科学的一个领域&#xff0c;它专注于使机器“智能化”。所谓智能&#xff0c;就是使系统能够像人类一样学习和做出决策。因此&#xff0c;人工智能机器将能够学习如何在特定情况下做出反应&#xff0c;然后根据…

【AIGC】重磅消息,GPT-4.5 Turbo将在6月发布?

2024 年 AI 辅助研发趋势 文章目录 强烈推荐GPT-4.5 Turbo竞争对手Anthropic的Claude 3谷歌的Gemini 1.5 Pro 总结强烈推荐专栏集锦写在最后 强烈推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击…

Cplex之新建一个项目并求解

cplex下载&#xff1a;Cplex安装教程与使用介绍-CSDN博客 链接&#xff1a;https://pan.baidu.com/s/1jD9Xved2aWPHtRd-_PLI5Q 提取码&#xff1a;n4og 补充b站上一个教程&#xff1a;快速学懂Cplex软件及其编程方法_哔哩哔哩_bilibili 一、建立并求解一个模型 step1 : 新…

【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列一:R-CNN图文详解

学习视频&#xff1a;Faster-RCNN理论合集 概念辨析 在目标检测中&#xff0c;proposals和anchors都是用于生成候选区域的概念&#xff0c;但它们在实现上有些许不同。 Anchors&#xff08;锚框&#xff09;&#xff1a; 锚框是在图像中预定义的一组框&#xff0c;它们通常以…

Python:函数的形参与实参

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 函数基本概念 在Python中&#xff0c;函数是一种将代码封装以进行重复使用的机制。它们允许你定义一段代码&#xff0c;以便在程序的多个位置调…