vue在v-for中实现自定义点击事件

最新推荐文章于 2024-07-27 19:03:29 发布

十٩(๑^o^๑)۶七

最新推荐文章于 2024-07-27 19:03:29 发布

阅读量3.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/YSHHJR/article/details/119736046

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何在v-for循环中触发点击事件，通过自定义指令v-hClick和@click.native实现每个循环项的独立点击处理。同时讲解了inserted钩子函数的应用，以及如何在事件处理方法中利用指令参数。该方法适用于需要在列表中分别处理点击事件的场景。

摘要由CSDN通过智能技术生成

问题

当v-for每循环一次需要触发一次点击事件的时候

解决

1.v-hClick中hClick为自定指令，此处根据数组下标index为指令发生点击事件

2.@click.native，此处需要添加.native监听组件根元素的原生事件，如果不加事件不会生效

<a-checkbox v-for='(item,index) in checkedList' :value='item.actFormId' :key='index' v-hClick='index' @click.native='compareForm(item.actFormId)'>{{item.actFormName}}</a-checkbox>

3.使用自定义指令directives中的inserted钩子函数

4.hClick上面自定义的指令，el：指令所绑定的元素，binding：一个对象，binding.value：表示指令绑定的值，这里使用binding.value表示自动点击index从1开始到循环结束的情况，binding.value === 0表示自动点击index等于0时的情况

5.最后完成点击事件方法即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

十٩(๑^o^๑)۶七

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue的v-for循环中单独给元素设置点击事件的样式

weixin_68658847的博客

02-10

3120

vue的v-for循环中单独给元素设置点击事件的样式

使用Vue-Grid-Layout实现自定义工作台

02-01

在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。首先，我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目，可以使用 Vue CLI 创建一个新的项目。在已有的项目中...

参与评论您还未登录，请先登录后发表或查看评论

vue v-for 点击当前行，获得当前行数据，以及event当前事件对象

好巧的博客

04-28

1万+

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。定义一个点击事件，传入两个参数（当前行数据、当前事件对象），当前事件对象必须加上。加上 $：点击之后获取到当前行数据以及当前事件对象。如果本篇文章对你有帮助的话，很高兴能够帮助上你。不加 $：点击之后报错。

Vue v-for循环之@click点击事件获取元素示例

12-13

应用背景浏览论坛的贴子（数据库的数据通过vue遍历在html页面上）点击帖子的标题、图片，可以查看详细的帖子（点击事件获取id） 1、设置一个隐藏值的放置Id的div，点击div就获取id，传参到后台（点击一部分） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 软件开发网(mscto.com)</title> [removed][removed] </head> <body> <div i

Vue给每个v-for的元素设置不同的点击事件

m0_47195133的博客

12-21

4388

如何给v-for中的元素绑定各自的点击事件

一、使用v-for进行遍历时，对不同的按钮绑定不同的点击事件

weixin_51431465的博客

08-07

450

【代码】一、使用v-for进行遍历时，对不同的按钮绑定不同的点击事件。

v-for循环给某个item添加点击事件

前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下

12-20

1982

<template> <view class="bread" v-for="(item, index) in nodePathArray" :key="index" @click='HandleClick(item)'> {{item.name}} </view> </template> methods:{ HandleClick(index){ //点击事件 if..

在vue的v-for中使用索引index值

01-06

在Vue.js框架中，`v-for`指令是一个非常重要的特性，用于遍历数组或对象，渲染列表或重复的模板。当我们需要在`v-for`循环中跟踪每个项目的唯一标识或执行特定操作时，可以利用其提供的索引`index`值。下面我们将...

vue 取出v-for循环中的index值实例

01-19

一开始接触到vue的for循环就觉得贼好用，重复性的东西再也不用ctrl C+ctrl V了好吗。不仅代码可复用了，而且提高了代码可读性、减轻了工作量，更重要的是写代码都有成就感了。贴出个小小例子： template <ul v-for...

Vue v-for中的 input 或 select的值发生改变时触发事件操作

10-14

在Vue.js中，`v-for`指令用于循环遍历数组或对象，生成多个DOM元素。当使用`v-for`与`input`或`select`元素结合时，我们常常需要监听这些表单元素的值变化，以便在值发生变化时执行相应的操作。本文将详细介绍如何在...

Vue中的v-for指令不起效果的解决方法

10-17

在Vue.js中，`v-for`指令是一种非常重要的特性，用于循环遍历数组或对象，渲染列表、表格等数据集合。然而，在实际开发过程中，有时可能会遇到`v-for`指令不起作用的问题。以下将详细解释这个问题的原因以及解决方法...

v-for循环后，点击事件控制子组件显示与隐藏

m0_61950846的博客

07-11

1379

for循环出来的东西里面，如果有子组件就会牵一发而动全身，所以我们希望，可以进行控制单个组件的展示与隐藏

为每一个 v-for循环出来的添加点击事件思路

weixin_43755104的博客

07-30

2011

文章目录思路首先在data中写入对象数组，并且写个可以if判断的标志如下图 upFlag是个标志，action也是个标志当action: 0是一个状态，action:1是另一个状态当状态改变时发生什么事件，例如改变背景色，切换显示不同的div，切换背景图片，改变背景颜色是:class不同的样式，显示不同的div是用v-if判断是true还是false来进行展示，换背景图片与切换显示一样无非就是切换显示不同的img, 切换不同的背景颜色一般用到的是3元表达式，当标志为1或者为0时绑定不同

Vue中通过v-for循环列表，绑定不同的点击事件和选项

Vivien_CC的博客

03-18

910

【代码】Vue中通过v-for循环列表，绑定不同的点击事件和选项。

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件 及点击后添加css类样式及点击后路由跳转切换

m0_46470372的博客

03-17

7384

如何给Vue v-for循环渲染出的元素批量添加点击事件 及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件，并以自己在数组中的下标为参数给Vue v-for循环出的元素批量添加点击后激活的css类（三元运算符方式），且在点击其他同列元素的时候自动取消该类给Vue v-for循环出的元素添加切换路由的事件正文 ...

Vue02--单数据、多数据v-for、事件处理v-on

gaxing4615的博客

03-20

774

语法单数据： <div id="app"> {{messgae}} </div> </body> <script> /* 特点：数据和元素分离以前：命令式编程现在：声明式编程 let与const */ const app=new Vue({ el:"#app", // 挂载需要管理的元素--将数...

vue3怎么用for循环遍历每个按钮并给每个按钮加上点击事件。