前言

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

标签:
vue,v-for,点击行,行数据,event事件对象

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。