vue 循环列表点击事件只更改当前项

2024-11-01

vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

<li @click="show"> <span>1</span> </li> <li @click="show"> <span>1</span> </li> <li @click="show"> <span>1</span> </li> li点击只让当前的 li 下面的span 隐藏方法一:用vu

微信小程序实现给循环列表点击添加类（单项和多项）

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作一.单项目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 <view> <view class='appointent-date'> <view class="appointent-date-di

vue Echarts 柱状图点击事件

drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); let barOption = { color: ['#29B4FC'], tooltip : { trigger: 'axis', // formatter: function(params) { // return params[0].value + '篇-' + params[0].name +'

微信小程序循环列表点击每一个单独添加动画

首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有点击这里查看微信官方文档简化一下哈:就是这样的先在js的data里面定义一个动画的值 data: { animationData: {}, }, 我这边做的是一个箭头图片的旋转所以wxml里面得元素是这样的 <image animation="{{animationData}}"

在vue中的点击事件怎么获取当前点击的元素

首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的,在点击的函数中添加$event 参数就可以比如<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 } },

使用for循环添加点击事件时，获取i值的方法

比如页面上有一个ul,数个li,现在给li添加点击事件. var li = document.getElementsByTagName("li"); for(var i = 0; i < li.length; i++) { li[i].addEventListener("click",function () { console.log(i); }) } 但是,这样写之后我们发现,点击任何一个li,打印的值都为5,这是因为闭包中共用i值,而i的值由于执行for循

vue.js click点击事件获取当前元素对象

Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

vue重温之mint-ui------------点击事件绑定

第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间了,多多交流咯,哈哈,其实是请教,此时的tabbar是有自己的默认事件的,需要阻止后才能触发绑定的click函数,具体如下: 这样就可以了.

原创~vue router-link添加点击事件

在学习vue中会遇到给router-link添加@click,@mouseover等事件我想要做的是用v-for循环输出导航菜单,但是下面代码的@click事件和@mouseover并不会响应 <router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click="changeBgc(index)" @mous

【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件，事件无效解决

背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, index){}即可解决,动态拼接的html元素和对应的点击事件都可以正常使用.问题来了,在使用vue时,点击事件不起作用了,F12后发现@click=""被解析成字符串了.这不就很扯淡了. 分析: 使用vue时,点击事件在vue初始化的时候进行编译的,但bootstrap-table中行操作事件

swiper在vue项目中的循环轮播bug以及点击事件

一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. 解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false.这时候使用autoplay开启自动播放是可以的, 然而当加上loop让其循环播放时,会发现是有

js 循环生成元素，并为元素添加click事件，结果只执行最后一个点击事件

问题描述:有一个参数集合data,for循环为每一个参数生成一个dom元素,并附加onclick事件.生成之后发现点击事件里的参数全是data集合里的最后一个. 代码如下: var dom=$('#div_id'); for(var i=0;i<data.length;i++) { var children=document.createElement("div"); children.onclick=function(){ alert(data[i]); } dom.appen

JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击Id为“ul”的元素时,会出现弹出10个10.为什么会弹出10个10呢? 首先,这段代码中的点击事件不是绑定事件,是jQuery的绑定事件,那么绑定事件和普通事件是有区别的.普通事件中,如果对某一个元素添加多个点击事件,那么,最后一个将会把前面的所有点击事件全部覆盖,只能执行最后一个点击事件:而在绑定事件中

vue引入echarts、找不到的图表引入方法、图表中的点击事件

1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package. 使用npm添加package.json文件中的配置并下载相关npm包依赖 npm install echarts --save 然后在项目文件的入口js文件main.js中添加 import echarts from "e

jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问题. 但是这么做的后果,在jquery1.8.2版本及以后所有版本(截止目前最新版本为3.3),会出现事件来回传递的问题,最终导致无限循环. 在jquery1.2.6版本中,子元素的点击传递给父元素时,再被父元素传递回来后,事件就不会再向外扩散了,也就是低级版本jquery只会向外扩散一次,但是在

小程序实践（五）：for循环绑定item的点击事件

微信展示列表效果借助于 wx:for 简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的数据源数据 --------------------------------------------------------------------------------------------------- 解决方法: 给有点击事件的组件添加一个 data-any 属性 any可以是任意数据类

javascript循环事件只响应最后一次的问题处理

在所有的面向对象编程语言中,只要涉及到逻辑的代码,常见的问题都是循环创建很多个对象UI,在循环体中对这些对象添加事件.如果不做处理,和其他地方一样的添加事件,其结果都是只响应最后一次循环之后的结果.原因就是这些事件虽然在循环体中创建,但是循环会在瞬间完成,事件还要等到触发才能执行,所以执行的时候,所有变量就都是最后一次循环产生的变量. 每种语言对此的处理方式几乎都是要在循环的时候给事件绑定上当前创建的对象,只是语言规范上稍有初入.最近使用js做几个页面,所以留下js的处理方式. 我在js中循环创

由于js词法性质和全局变量被更改，循环绑定的click事件执行时变量和定义时不一致的bug，各种解决方案。

由于js词法性质和全局变量被更改,循环绑定的click事件执行时变量和定义时不一致的bug,各种解决方案. 动态在页面上添加了5个按钮,实现的功能应该是点击对应按钮在控制台输出相应的索引.但因为应该是i的变量应该一直指引的对应的地址,所以一直输出的是5.就是想请教您一下,这种问题应该是怎么样的一个解决思路.您要是有时间的时候帮我看下.非常感谢! 问题: //这个有bug,一直输出5 for (var i =0 ; i<5 ; i++){ var btn = document.createEle

ListView控件的列表项的文字不满一行的时候，如何实现点击该列表项的空白区域仍可触发列表项的点击事件

今天在做Demo的过程中,使用到了ListView.然而在实现过程中,发现一个出现了一个问题:只能点击列表项的文字区域可以触发点击事件,而点击列表项的空白区域无法触发点击事件. 如下图: listitem的布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q

记录Vue和Jquery混合开发中关于点击事件的一个bug

最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的methods中,然后用@click去监测. 一直困惑的是这个BUG在不同的页面中有时有,有时没有,而且出现的情况很少.今天工作闲了一点,于是乎专心去琢磨这个问题. 网上百度到的解决方案是这样的,如下图: 于是乎自己试了一下确实可以.代码如下图: 但是回过头来看项目就很奇怪,说的写在JQ的dom加载完成函

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记: 实现原理利用CSS伪类:target <!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS实现点击事件展现隐藏div菜单列表</titl

vue 循环列表点击事件 只更改当前项

热门专题

vue 循环列表点击事件只更改当前项