click传值vue_vue获取当前点击的元素并传值的实例

最新推荐文章于 2022-12-05 20:26:22 发布
最新推荐文章于 2022-12-05 20:26:22 发布
阅读量1.9k 收藏
点赞数 1
文章标签： click传值vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42290401/article/details/111922357
版权

vue获取当前点击的元素并传值的实例

html：

js：

zan(e){

var target=event.target;

var dataid=e;//(pl.id的值);

$(target)//当前点击的dom

}

以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

Vue.js中兄弟组件之间互相传值实例

vue.js获得当前元素的文字信息方法

时间： 2018-03-08

兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听.

组件传值

1.获得当前点击的内容

1. 关于公众号使用问题 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol

Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery

前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图

&

本文实例讲述了vue.js实现插入数值与表达式的方法.分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1.插入纯文本 插入纯文本是最简单的方式,使用双大括号就能插入想要的值. {{ msg }} mustache也可以在属性中使用

就能显示所需要显示的文本信息了.但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入

L3Byb3h5L2h0dHAvaW1nLmpiemouY29tL2ZpbGVfaW1hZ2VzL2FydGljbGUvMjAxOTA1LzIwMTk1MTQxNDE1MDY3NzUucG5nJiMwNjM7MjAxOTQxNDE0MTUyMA==.jpg

偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: 55 getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写:

本文实例讲述了js显示文本框提示文字的方法.分享给大家供大家参考.具体实现方法如下: <

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti

最近朋友需要一个可以识别图片中的文字的程序,以前做过java验证码识别的程序: 刚好最近在做一个python项目,所以顺便用Python练练手 1.需要的环境: 2.7或者3.4版本的python 2.需要安装pytesseract库 依赖PIL和tesseract-ocr库 本地环境是ubuntu,下面说一下 具体步骤: 2.7 1.安装PIL: 直接使用pip 安装: pip install Pillow 2.安装tesseract-ocr: apt-get install tesserac

Hura Bo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue获取当前点击的元素并传值的实例
08-27
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue如何输出一个值_如何利用vue获取当前点击的元素并传值（图文教程） -
weixin_39779537的博客
12-23 796
thinkphp开发的一个项目，登录成功后又跳转到登录页面，在提交信息后输出session都是正常的，没有问题，但是页面跳转后，session出现丢失现象，无法正常完成登陆。通过查找资料，发现原来是bom头的原因。受COOKIE送出机制...下面我就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。html：js：zan(e){var target=eve...
vue：click函数传当前数组的参数和获取当前dom
m0_37922443的博客
08-24 3338
传值：获取当前的数组的index位的数据 <tr v-for="(item,index) in message_List"> <td @click="reply(message_List[index].phone_num)">{{item.phone_num}}</td> </tr> reply: function (e) { console.log("number:" + e); }, .
vue 的点击事件怎么获取当前点击的元素
weixin_42508745的博客
03-26 1636
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } } ...
使用vue点击li,获取当前点击li父辈元素的属性值方法
10-18
8. **异步数据加载**：在`$(function(){...})`中，我们使用`$.ajax`获取JSON数据，并将数据赋值给Vue实例的`data`属性。这是初始化Vue应用时加载外部数据的一种方式。 9. **数据交互**：`$.ajax`方法用于向服务器...
Vue v-for循环之@click点击事件获取元素示例
10-16
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 的点击事件获取当前点击的元素方法
10-18
总结一下，Vue.js的点击事件可以通过`@click`指令结合`$event`参数来实现，`$event.target`可以获取到当前点击的元素，而`$event.currentTarget`则指向事件绑定的元素。掌握这些知识对于构建交互丰富的Vue应用至关...
vue click事件获取当前元素属性
u011927449的博客
06-22 3222
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: {
垂直菜单样式&vue在click事件中获取当前dom元素
qq_35976548的博客
06-09 1155
简单版垂直菜单样式 效果图： <div id ="leftDiv"> <a href="#" @click="goLink('我是其他参数',$event)" class="active">AAA</a> <a href="#" @click="goLink('我是其他参数',$event)">BBB</a> </div> <div id ="rightDiv"> &lt
vue点击事件操作dom元素（父元素、子元素、兄弟元素）
Linging_24的博客
03-06 1628
<ul @click ="clickfun($event)"> <li></li> </ul> methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML //获
在vue框架下，怎么给原生js添加的dom元素添加@click点击事件（el upload添加图片上传数量显示）
weixin_44114624的博客
03-31 2890
在vue框架下，怎么给原生js添加的dom元素添加@click点击事件 先说下问题出现的场景，vue框架下，在elementui里的upload创建一个组件后面显示图片数量，所以想着添加一个span标签（后期实现是利用elment里面提供的一个slot插槽实现的） // 部分代码隐藏了 // vue图片上传组件 <el-form-item label="图片"> <el-upload action="#" list-type="picture-card"
Vue--click事件传递参数--方法/教程/实例
热门推荐
IT利刃出鞘的博客
11-08 6万+
原文网址： 简介 说明 本文用示例介绍Vue中事件传参的方法。 Vue的事件用法为：v-on:click="xxx"。可以用@click="xxx"来简写。 本处采用click这个事件进行展示，其他的事件也是一样的。 官网 事件处理 — Vue.js 只传自定义参数 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&...
Vue.js 中v-on:click怎么传递参数获取到当前元素
单枪匹码
12-16 1万+
原生js在标签中使用onclick事件时传递当前元素的对象使用的是this。 //this指向当前元素 在onclick = "fn(this)" 而在Vue中这使用$event来传递当前元素对象作为参数，并在methods的方法中通过event.currentTarget来使用当前元素并进行相关操作。 //Vue中使用方法 v-on:click="fn($event)" methods: ...
vue click点击获取点击元素
qq_43654065的博客
01-18 6627
<div @click="test">点击</div> //获取当前点击元素 var el = event.currentTarget currentTarget事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。即点击事件绑定在哪个元素，currentTarget获取的就是那一个元素。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于target属性。 Event对象的一些兼容写法 // 获得event对象兼容性写法 event||(event
Vue中currentTarget $event 的用法
hh3167253066的博客
08-21 1945
<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.fi
vue中点击获取相应元素
ZZHK666的博客
02-11 7259
在vue中通过点击事件获取上一个标签、父标签、第一个子标签等元素。( 以下元素都是以所点击的元素进行查找 ) e.target 获取当前点击的元素 e.currentTarget 获取绑定事件的元素 e.currentTarget.previousElementSibling 获取前(上)一个元素 e.currentTarget.parentElement 获取父元素 e.currentTarget.firstElementChild 获取第一个子元素 e.currentTarget.nextElement
VUE中v-on:click事件中获取当前dom元素
weixin_30785593的博客
08-21 2609
在开发中总是忘记， 特意在此记录 关键字： $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { ...
vue中传值的方法
czw2ly的博客
12-05 3303
主要是谈谈vue中组件传值的方法，供大家参考
iframe传值vue
最新发布
12-18
以下是两种iframe传值给Vue的方法： 1. 在Vue中给iframe传值 ```html <!-- Vue模板 --> <template> <div> <button @click="fatherpost">给iframe传值</button> <iframe ref="iframe" src="http://192.168.4.184:20011/#/regulation" width="800px" height="500px"></iframe> </div> </template> <script> export default { mounted() { // 挂载在mounted中 this.iframeWin = this.$refs.iframe.contentWindow; }, methods: { fatherpost(e) { // 点击给iframe传值 this.iframeWin.postMessage("我是来自父页面的data", '*'); }, }, }; </script> ``` 2. 在iframe中给Vue传值 ```html <!-- iframe模板 --> <template> <div> <button @click="sonpost">向父亲传值</button> </div> </template> <script> export default { methods: { sonpost() { window.parent.postMessage("我是子页面的test！", '*'); }, }, }; </script> ``` 注意：在Vue项目中接收消息的代码应该写在Vue实例的生命周期函数中，例如mounted()或created()。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值