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 相关文章推荐
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
js常用DOM方法详解
Feb 04 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript实现随机读取数组的方法
2015/08/03 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
vue.js todolist实现代码
2017/10/29 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
浅析NumPy 切片和索引
2020/09/02 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
创新型城市实施方案
2014/03/06 职场文书
纪检监察建议书
2014/05/19 职场文书
服务口号大全
2014/06/11 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
第二次离婚起诉书
2015/05/18 职场文书
小学班主任研修日志
2015/11/13 职场文书
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers