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 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 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
文件上传类
2006/10/09 PHP
PHP新手上路(六)
2006/10/09 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python字符串的方法与操作大全
2018/01/30 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
小学安全教育月活动总结
2014/07/07 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL