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入门知识简介
Mar 04 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JavaScript获取路径设计源码
May 22 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 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在线生成二维码代码(google api)
2013/06/03 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
js自定义回调函数
2015/12/13 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python线程锁(thread)学习示例
2013/12/04 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python读写压缩文件的方法
2020/07/30 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
护士辞职信范文
2014/01/19 职场文书
文字自荐书范文
2014/02/10 职场文书
预备党员承诺书
2014/03/25 职场文书
小学生差生评语
2014/12/29 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
初婚初育证明范本
2015/06/18 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
MySQL锁机制
2021/04/05 MySQL
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python