Vue中v-on:click怎么传递参数获取到当前元素

最新推荐文章于 2024-10-12 08:16:30 发布

白兔仔

最新推荐文章于 2024-10-12 08:16:30 发布

阅读量2.2w

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Hreticent/article/details/89852476

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//原生js
//this指向当前元素
在onclick = "fn(this)"

//Vue中使用方法
v-on:click="fn($event)"

methods: {
    fn: function (e) {
        // 当前元素
        e.currentTarget; 
    }
}

vue动态绑定样式利用三元运算符

//在需要的html标签上
:style="(currentGames.list[2].id==3)?'display:none':'display:flex'"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白兔仔

关注关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VUE初学---事件处理 v-on:click、v-on:keyup

qq_42970981的博客

11-22

3969

为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无...

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

11-28

html： <span click='zan(pl.id)' data-id='pl.id'></span> js： zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom } 以上这篇vue获取当前点击的元素并传值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

参与评论您还未登录，请先登录后发表或查看评论

详解vue中v-on事件监听指令的基本用法

10-15

主要介绍了详解vue中v-on事件监听指令的基本用法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下

VUE中v-on:click事件中获取当前dom元素的代码

12-29

在开发中总是忘记，特意在此记录关键字： $event <div class=bed v-on:click=updateBed(index,$event)>{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: <i @click=iconToogle($event) class=iconfont icon-

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

10-19

本文将深入探讨Vue.js的事件处理器`v-on:click`，它是如何工作的，以及如何在实际项目中有效利用。 ### 1. `v-on`指令 `v-on`是Vue中的一个指令，用于监听DOM事件。它允许你将Vue实例的方法绑定到特定的DOM元素上...

Vue v-for循环之@click点击事件获取元素示例

10-16

在该方法内部，通过e.currentTarget.innerHTML获取到当前被点击的td元素内的内容，也就是循环中当前元素的id。第二种场景则更为直接，直接将循环项中的site.num属性传递给link方法，并通过该方法弹出对应的信息。 ...

vue v-on:click传递动态参数的步骤

10-14

主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

js动态添加onclick事件可传参数与不传参数

10-25

本节主要介绍了js动态添加onclick事件可传参数与不传参数,需要的朋友可以参考下

oclick vue 传参函数_vue基础之事件v-onclick="函数"用法示例

weixin_42355204的博客

01-28

544

本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考，具体如下：v-on:click/mouseout/mouseover/dblclick/mousedown.....事件:v-on:click="函数"v-on:click/mouseout/mouseover/dblclick/mousedown.....new vue({el:'#box',data:{ //数据...

click传值vue_vue 三种传值方法

weixin_30813385的博客

12-23

1666

话不多说,直接撰写第一种:父传子父: 父组件: (v-model双向绑定)import child from './child'export default {components: { child },data () {return {val: ''}}}子组件子组件: {{inputName}} export default {// 接受父组件的值props: {inputName: Str...

点击事件中的this|click事件与change事件|v-model

随便写写

12-18

1724

js <input type="radio" value="xxx" name="sex" onclick="ccc(this)" />男 <input type="radio" value="yyy" name="sex" onclick="ccc(this)" />女 <script> function ccc(_this) { console.log(_this); console.log(_this.value); } </scr

vue给methods中的方法传入当前点击行的值

ann123_2016的博客

05-27

940

<template>  <div class="event"> <ul> <li v-on:click="getName(name,index,$event)" v-for='(name,index) in names'>{{name}}</li> ...

js和vue中this指向总结

yusun1234的博客

02-11

1045

js 1、构造函数中，指向构造函数本身 function Pro(){ this.x = '1'; this.y = function(){}; } var p = new Pro(); 2、事件绑定中，行内绑定指向window、动态绑定和监听事件指向本节点对象 3、定时器中，分两种 var obj = { fun:function(){ this ; } } setInterval(obj.fun,1000); // this指向

Vue事件处理详解：v-on指令与方法应用

Vue中的事件监听主要依赖于`v-on`指令。通过这个指令，开发者可以将JavaScript代码与特定的DOM元素关联起来。例如，下面的代码片段展示了如何监听`click`事件并增加`counter`属性的值： ```html <button v-on:...