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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
js实现每日签到功能
Nov 29 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版
2006/10/09 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python命令行工具Click快速掌握
2019/07/04 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
事业单位辞职信范文
2014/01/19 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
农民工讨薪标语
2014/06/26 职场文书
个人工作表现评价材料
2014/09/21 职场文书
科学育儿宣传标语
2014/10/08 职场文书
大学生自荐材料范文
2014/12/30 职场文书
微信早安问候语
2015/11/10 职场文书