vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

前言

在 v-for 循环语句上，定义一个点击事件 传入两个参数（当行数据、当前事件对象），如下代码片段，当前事件对象必须加上 ‘$' 符号

<template>
 <div>
  <ul>
   <li
    v-for="(item, index) in arrData"
    :key="index"
    @click="operate(item, $event)"
   >
    {{ item.title }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 data() {
  return {
   arrData: [
    { id: 1, title: '第一条数据' },
    { id: 2, title: '第二条数据' }
   ]
  };
 },
 methods: {
  operate(item, event) {
   console.log(item);
   console.log(event);
  }
 }
};
</script>

不加'$‘报错：

加上'$‘: 点击行之后获得当前行数据 以及当前事件对象

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

补充知识：vue获取当前点击对象的下标，和当前点击对象的内容

如下所示：

<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>

data里面声明：

data() {
  return {
   tabList: [
    { id: 0, title: "首页1" },
    { id: 1, title: "首页2" },
    { id: 2, title: "首页3" }
   ],
   current:0
  };
 },
 methods: {
  addClass: function(index,event) {
   this.current = index;
   //获取点击对象
   var el = event.currentTarget;
   console.log("当前对象的内容："+el.innerHTML);
   console.log(this.current)
  }

以上这篇vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

    1. 绑定元素 2. mounted生命周期 3. 实现思路 页面挂载完后,监听全局点击事件 获取当前点击的元素,根据需求获取当前元素本身的属性 判断当前点击元素与要隐藏的元素是否相同 当前点击元素与要隐藏的元素不相同则隐藏 4. 最终效果 接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗 方法: 步骤1:给页面最外出的元素div加点击事件:@click="popShow = false". 步骤2:给点击目标元素加点击事件:@click="popShow = true

  • 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-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-for 点击当前行,获取当前行数据及event当前事件对象的操作

    前言 在 v-for 循环语句上,定义一个点击事件 传入两个参数(当行数据.当前事件对象),如下代码片段,当前事件对象必须加上 '$' 符号 <template> <div> <ul> <li v-for="(item, index) in arrData" :key="index" @click="operate(item, $event)" > {{ item.title }} </li&

  • js中获取事件对象的方法小结

    js中获取事件对象的方法小结

    复制代码 代码如下: var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论,你也许会看到以前没有看到过的获取方式. 1,第一种添加事件的方式,直接在html的属性中写JS代码 复制代码 代码如下: <div onclick="alert(4);">Div1 Element</div> 大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的

  • Android 如何获取传感器的数据方法详解

    Android 如何获取传感器的数据方法详解

    目录 1 传感器简介 2 传感器的使用 2.1 获取传感器服务 2.2 获取待监听的传感器 2.3 注册传感器的监听器 2.4 注销传感器的监听器 3 示例代码 1 传感器简介 传感器 Sensor 是一种检测装置,能感受到被测量的信息,并能将感受到的信息,按一定规律变换成为电信号或其他所需形式的信息输出,以满足信息的传输.处理.存储.显示.记录和控制等要求. Android 提供了对设备传感器的支持,只要 Android 设备的硬件提供了这些传感器,Android 应用可以通过传感器来获取设备

  • vue 通过绑定事件获取当前行的id操作

    如下所示: <div @click="router(items.productId)" style="float: left;" :key='items.productName' v-for="items in item"> </div> 获取: router(e){ conslone.log(e); } 补充知识:Vue.js的事件(单双击.鼠标和键盘)以及阻止事件冒泡 自己随便琢磨了一个小的Demo,实现了一些事件和阻

  • 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.js2.0点击获取自己的属性和jquery方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="dt"> <div id="dongtao"> <span class="nihao" v-for=&qu

  • vue+elementui实现点击table中的单元格触发事件--弹框

    elementui中提供了点击行处理事件 查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

  • vue 实现Web端的定位功能 获取经纬度

    首先我这里的需求呢, 是获取当前用户的经纬度 经过无数次的测试, 先后用了 腾讯/百度地图的api,最后绝对还是高德的js APi 废话不多说, 直接上代码. 首先在 index.html 里面 引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 然后 去你需要获取的页面 开始写, 我这里

  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法 原文地址 http://www.sharedblog.cn/?post=205 <template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2

随机推荐