vue怎么点击获取当前元素

article/2025/9/13 20:47:22

vue中有两种方法获取到当前元素

var el = event.target; //当前元素,可修改(能够用此方法获取到他的子元素,不能获取他本身的内容)
var el = event.currentTarget;//当前元素,不可修改(能够用此方法获取到他的子元素及能获取他本身的内容)

html

<div id="example-2"><!-- `onsomething` 是在下面定义的方法名 -->
<button v-on:click='onsomething'>复杂的click<span>哈哈</span></button>
</div>

js

var example2 = new Vue({el: '#example-2',data: {name: 'Vue.js'},// 在 `methods` 对象中定义方法methods: {onsomething:function(event){ // `event` 是原生 DOM 事件alert('hello'  + this.name +'!' ); // `this` 在方法里指向当前 Vue 实例var el = event.currentTarget;//复杂的click哈哈//var el = event.target;//哈哈alert(el.innerText);}}
})// 也可以用 JavaScript 直接调用方法
//example2.greet() // => 'Hello Vue.js!'

在这里插入图片描述


http://chatgpt.dhexx.cn/article/M7cNy11t.shtml

相关文章

vue3获取dom

在vue3中获取dom&#xff0c;有几点需要注意&#xff1a; 1&#xff0c;获取dom的ref元素名称&#xff0c;要对应暴露的名称&#xff0c;不然会出现无效的dom报错&#xff0c;也就是拿到的是null 2,在setup中&#xff0c;使用ref&#xff08;null&#xff09;获取dom 3,不能…

vue3中获取dom元素和操作

一&#xff0c;需求概述 直接举例子来说明吧&#xff0c;我想要做的是&#xff0c;遍历这几个菜单&#xff0c;获取他们的dom元素的宽度。当文字dom元素宽度太长的话&#xff0c;需要滚动显示文本。 二&#xff0c;实现思路 对应的html: <div class"icon-box"…

vue 3.0 使用ref获取dom元素

前言 附上vue3.0文档&#xff1a;Vue3中文文档 - vuejs 2022.10.22 更新 鉴于较多人询问几个高频问题&#xff0c;在此做统一回复 ref.value获取到的是null 答&#xff1a;检查是否将ref变量return出去了 答&#xff1a;检查是在哪里进行的console.log&#xff0c;setup函数…

Vue.js实例学习:获取DOM元素

一、获取DOM元素 在Vue中获取DOM元素&#xff0c;我们可以用ref。 用法(和React一样)&#xff1a; &#xff08;1&#xff09;在组件的DOM部分&#xff0c;任意标签中 写上&#xff1a;ref"xxx" &#xff08;2&#xff09;通过组件对象 this.$refs.xxx 获取到元素 …

ref 引用(vue获取DOM元素)

ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势&#xff1a; MVVM 在 vue 中&#xff0c;程序员不需要操作DOM。只需要把数据维护好&#xff01;(数据驱动视图) 结论&#xff1a;在 vue 项目&#xff0c;强烈不建议大家安装和使用jQuery&#xff01;&#xff01;&am…

sql中批量插入数据用法

单次插入数据方法 INSERT INTO 表名&#xff08;字段1&#xff0c;字段2&#xff0c;字段3&#xff09;VALUES(第一个值&#xff0c;第二个值&#xff0c;第三个值&#xff09; 多次插入方法 第一种 INSERT INTO 表名&#xff08;字段1&#xff0c;字段2&#xff0c;字段3…

sql-批量插入数据脚本

批量插入数据脚本 1、第一种批量插入数据脚本. 可以基本满足要求。理解上较为简单&#xff0c;所以这个最常用。 DECLAREmaxnumber CONSTANT INT : 5000;--插入5000条数据i INT : 1;--i的取值从1开始 BEGINFOR i IN 1 .. maxnumber loopinsert into ODS.TABLE1--表名(ID, P_ID…

oracle11g批量insert多条,Oracle高效批量插入数据

一、准备工作 建表 CREATE TABLE TEMP_20200210 ( DMC VARCHAR2(100); ) 用程序拼接如下的批量插入的SQL INSERT INTO TEMP_20200210 (DMC) SELECT CD.* FROM ( SELECT 1234567 FROM DUAL UNION SELECT 1234568 FROM DUAL UNION SELECT 1234568 FROM DUAL ) CD 在C盘文件夹下放…

springboot 注解方式批量插入数据

文章目录 一.使用场景二.实现方法1.mysql表结构2.domain3.mapper4.测试类5.测试结果 三.插入效率对比1.批量插入2.一条一条插入 一.使用场景 一次请求需要往数据库插入多条数据时&#xff0c;可以节省大量时间&#xff0c;mysql操作在连接和断开时的开销超过本次操作总开销的4…

Jmeter向数据库批量插入数据

Jmeter向数据库批量插入数据 下面介绍一下Jmeter向mysql数据库中插入数据的入门操作 1、新建一个线程组&#xff0c;这是必经步骤&#xff1a; 在测试计划上右键–>添加–>Theaders(Users)–>线程组 2、添加配置元件JDBC Connection Configuration 在线程组上右键…

【Hbase批量插入数据】

一.批量插入数据&#xff08;hbase用户执行&#xff0c;不可以调整key&#xff09; -- create ns_zj001:bigTab,f01 -- put ns_zj001:bigTab,001,f01:name,zhangsan java -cp ./hbase-tools-1.0.jar:hbase classpath com.suning.tools.Tools -zk hbase01-dev.cnsuning.com,h…

大数据写入到Oracle数据库(批量插入数据)

开发中经常遇到批量插入数据的需求&#xff0c;为了提高开发效率大多会使用ORM架构&#xff0c;个别之处 才会手写SQL&#xff0c;我们使用C#.NET Core5.0开发&#xff0c;所以优先选择了微软的EF。 但是EF原生没有批量操作功能&#xff0c;需要自己扩展或使用第三方的扩展&am…

Mybatis如何批量插入数据?

有一小段时间没有写技术博文了&#xff0c;今天我又来更新啦&#x1f60a;&#x1f60a;&#x1f60a;5月份中间有个小插曲&#xff0c;那就是我在单位打球意外导致脚跟腱受伤&#xff0c;然后住院在家修养了一个多月了&#xff0c;所以小伙伴们在外锻炼时还是时刻注意自身的安…

MYSQL-批量插入数据

批量插入数据 存储过程也有返回值&#xff0c;存储过程有一个或多个返回值&#xff0c;函数有且只有一个返回值 往表里插入1000w数据 1.建表 create database bigData; use bigData;create table dept( id int unsigned primary key auto_increment, deptno mediumint unsi…

Mybatis批量插入数据

前言 在很多业务场景中&#xff0c;我们需要批量录入数据。那么意味着我们需要以最高效的方式去实现功能&#xff0c;同时也需要保证软件的便捷性与可维护性&#xff0c;开源字节使用MyBatis foreach标签方式优雅的实现了材料的出入库。源码开放&#xff0c;可前往码云仓库免费…

批量插入

目录 一、批量插入数据 ⚪JDBC的批量处理语句的方法 二、高效的批量插入 1.举例&#xff1a;向goods表中插入20000条数据 ⭐goods表的创建 方式一&#xff1a;使用Statement 方式二&#xff1a; 使用PreparedStatement替换Statement &#x1f319;方式一与方式二的对比…

三种批量插入数据的方法

批量插入数据 本文将介绍三种批量插入数据的方法。第一种方法是使用循环语句逐个将数据项插入到数据库中&#xff1b;第二种方法使用的是SqlBulkCopy&#xff0c;使您可以用其他源的数据有效批量加载 SQL Server 表&#xff1b;第三种使用的方法是sql server中的表值参数方法&a…

Vue 通过a标签下载文件

vue前端点击某个a便签需要下载对应文件&#xff0c;href为下载路径&#xff0c;download为下载文件名 这是Vue-cli3 写法 因为public文件夹是静态拷贝。 并不要把文件放到src>assets里面 因为assets中的文件会经过 webpack 打包&#xff0c;重新编译。 <a href"./p…

通过 a 标签下载文件

后台管理项目涉及到文件下载到本地&#xff0c;类型包括&#xff08;图片&#xff0c;音频&#xff0c;视频&#xff0c;office文件等等&#xff09;&#xff0c;只需将后台接口提供的url给到 a 标签即可。 <div class"preview-download" click.stop"downLoa…

a标签下载文档 a下载文档失败问题 跨域调用

可以通过a标签下载文档 a中有一个download属性 这个属性可以为空&#xff0c;如果写入的话这是写下载文档的名字 a标签默认下载是在同一个域内&#xff0c;如果跨域的话下载会失败&#xff0c;可能变成预览 出现的问题 from origin ‘http://localhost:8080’ has been blocke…