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


Posted in Javascript onSeptember 10, 2020

前言

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

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

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

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

补充知识: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当前事件对象的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
vue循环中点击选中再点击取消(单选)的实现
Sep 10 #Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
You might like
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python如何将字符串转换为日期
2020/07/31 Python
python简单实现9宫格图片实例
2020/09/03 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
区域销售经理职责
2013/12/22 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
学校七一活动方案
2014/01/19 职场文书
学校与家长安全责任书
2014/07/23 职场文书
结对共建协议书
2014/08/20 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
放假通知
2015/04/14 职场文书
银行服务理念口号
2015/12/25 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript