vue 的点击事件获取当前点击的元素方法

首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,

在点击的函数中 添加$event 参数就可以

比如

<button @click = “clickfun($event)”>点击</button>
methods: {
clickfun(e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
}
},

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

赞 (0)

相关推荐

  • Vue根据条件添加click事件的方式

    需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

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

    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.js中兄弟组件之间互相传值实例 vue.js获得

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

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • vue基础之事件v-onclick=

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

    本文实例讲述了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:{ //数据 arr:['apple','banana','orange','pear'

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

    在开发中总是忘记,特意在此记录 关键字:   $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-

  • vue 的点击事件获取当前点击的元素方法

    首先 vue的点击事件 是用 @click = "clickfun()" 属性 在html中绑定的, 在点击的函数中 添加$event 参数就可以 比如 <button @click = "clickfun($event)">点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } }, 以上这篇vue 的点击事件获取当前

  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    :id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi

  • 使用vue点击li,获取当前点击li父辈元素的属性值方法

    vue实现加载并展示后台数据的tab选项卡 vue用于渲染页面 jquery用于方法实现动态效果 <div class="content"> <!-- change方法, 数值改变触发 --> <select v-on:change="getData()" name="" id="dataSelect"> <option value="" v-bind:name=&

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

  • Vue表单提交点击事件只允许点击一次的实例

    常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {

  • jquery获取当前点击对象的value方法

    例:获取ul中li的value值 首先,在html中我们要为每个li设置value值 复制代码 代码如下: <ul> <li value="你好"></li> <li value="hello"></li> <li value="=-="></li> </ul> 再通过jquery根据点击事件获取对应的value 复制代码 代码如下: $(docume

  • jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) <script type="text/javascript" src="script/jquery-1.8.3.js"></script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段

  • vue父组件触发事件改变子组件的值的方法实例详解

    父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作 后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-

随机推荐