vue 带下标循环、点击事件动态id赋值和事件传参

最新推荐文章于 2024-03-05 10:04:33 发布
最新推荐文章于 2024-03-05 10:04:33 发布
阅读量4.1k 收藏 3
点赞数
分类专栏： Vue 文章标签： vue js javascript ajax html
©辛勤耕耘，转载请注明来源。 || 自建博客: janycode.github.io || CSDN博客：simple.blog.csdn.net
本文链接：https://blog.csdn.net/sinat_36184075/article/details/107577968
版权

vue 带下标循环、点击事件动态id赋值和事件传参

Vue 使用的 CDN，可以直接复制，预览测试 v-for 和 click 事件传参效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue 带下标循环、点击事件动态id赋值和事件传参</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="test">
			<!-- 普通带 index 下标的 vue v-for 循环，和 点击事件实现动态传参 -->
			<div v-for="(t, index) in testList" v-if="t <= 3">
				<h3>h3：这是值 {{t}}, 遍历下标 index={{index}}。</h3>
				<a href="t01-click.html" id="a1" v-bind:id=t v-on:click="getId($event)">超链接{{t}}</a>
			</div>
			<!-- 简写版    :id 等价于 v-bind:id    v-on:click 等价于 @click -->
			<div v-for="(p, index) in pageList" v-if="p === 'p2.html'">
				<h3>p2.html：这是值 {{p}}, 遍历下标 index={{index}}。</h3>
				<a href=p id="a1" :id=p @click="getId($event)">{{p}}</a>
			</div>
		</div>

	</body>
	<script>
		var app = new Vue({
			el: "#test",
			data: {
				testList: [1, 2, 3, 4, 5], // 如 ajax 异步请求后，赋值给 app.testList
				pageList: ['p1.html', 'p2.html', 'p3.html', 'p4.html', 'p5.html']
			},
			methods: {
				getId: function(e) {
					alert(e.currentTarget); // href属性的绝对路径值：http://127.0.0.1:8848/TestVue/t01-click.html
					alert(e.currentTarget.id); // 获取 v-bind:id=值 中绑定的 id 的值，此 id 为其标签中的属性，且不会与非绑定的 id 冲突
					for (var i = 0; i < app.idList.length; i++) {
						console.log(app.idList[i]);
					}
				}
			}
		});
	</script>
</html>
姜源Jerry
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue动态渲染svg、添加点击事件的实现
10-15
主要介绍了vue动态渲染svg、添加点击事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue的v-for循环中单独给元素设置点击事件的样式
weixin_68658847的博客
02-10 2859
vue的v-for循环中单独给元素设置点击事件的样式
vue中使用v-for动态的绑定ref
m0_68937827的博客
10-11 1451
动态绑定ref
Vue入门教程
最新发布
weixin_71366486的博客
03-05 800
<title>Vue的自定义指令(函数式)</title>-- 导入 vue.js --></style></span></h2><h2>放大10倍的n值是: <span v-big="n">点我n+1
vue中v-for循环出来的元素绑定的不同事件
qq_28586119的博客
07-05 1万+
场景：在v-for循环出来的元素中，有时候不同的元素需要绑定包不同的元素，例如按键，按钮之类的元素，需要在循环出来的元素中循环出不同的事件。 例如下图中按不同的按钮要执行不同的指令 解决方案：利用数据中的编号，为不同的按钮绑定不同的事件方法名称，然后在函数中定义出监听事件，然后给不同的事件绑定相应的方法。 数据： data() { return { ...
vue中对v-for循环出的新节点动态添加class
九亿宅男的梦的博客
01-04 1825
<li v-for="(item,index) in list" :key="item.id" :class="[ {'class1':index % 4===0}, {'class2':index % 4===1}, {'class3':index % 4===2}, {'class4':index % 4===3}...
vue.js v-for 事件 动态参数
^璐三岁要耍蓅氓♡
05-04 530
<li v-for="(item,index) in showwz"> <div style="position: relative;"> <img :src=item.finalImg alt="" @click='imgBtn(item.wxId)'&g...
v-for 循环 @click 动态传参（参数动态）
草巾冒小子的博客
05-25 6802
@click="function('id_'+data.id)"
Vue v-for循环之@click点击事件获取元素
热门推荐
信徒博客
03-28 4万+
应用背景 浏览论坛的贴子（数据库的数据通过vue遍历在html页面上） 点击帖子的标题、图片，可以查看详细的帖子（点击事件获取id） 1、设置一个隐藏值的放置Id的div，点击div就获取id，传参到后台（点击一部分） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl...
uni-app,vue循环不同点击事件并传值
hjy170314的博客
12-22 1512
<view class="btnBox"> <view v-for="(item, index) in pageObj.btnList" :key="index"> <view class="page__bd"> <view class="page__bd page__bd_spacing title__bd walltBtnBox"> <image :src="walletImg[index]" clas.
vue v-for循环中如何给部分元素添加事件和样式
Zed_GM的博客
08-06 4111
统一添加样式很简单，下面看下给单独某个循环出来的元素添加事件和样式。 <template> <div id="bbottom" class=""> <div class="bottom"> <div class="title"> <el-breadcrumb separator-class="el-ico...
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
01-18
：id绑定 :id=”‘a_’+index” ...然后在vue的实例中就可以拿到对应的id b(index){ this.list.splice(index,1); } 或 ”open($event)” id=”1″>添加 open(a){ console.log(a.currentTarge
对vue下点击事件传参和不传参的区别详解
10-18
今天小编就为大家分享一篇对vue下点击事件传参和不传参的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue3】实现动态给id赋值，点击事件获取当前点击的元素的id操作
Jessieeeeeee的博客
01-16 5426
场景 需要让输出的 id 为 0，1…… 代码 <div v-for="(item,index) in list" :key="index" > <div :id="index" @click="b(index)">我是id</div> </div> 然后在 vue 的实例中就可以拿到对应的 id b(index){ this.list.splice(index,1); } 或 <div @click="open($event)" id="
vue基础2--vue基础API
咖啡壶的博客
12-04 560
vue基础api的使用介绍
vue——v-for指令
weixin_44649210的博客
11-02 381
在v-for中使用数组 用法：(item, index) in items index为数组下标 <ul id="app"> <li v-for="(person, index) in persons"> {{ index }}---{{ person.name }}---{{ person.age }} </li> </ul> const vm = new Vue({ el: '#app', data: { persons:
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 4311
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
vue页面加载调用v-for循环的第一个点击事件
qq_59710846的博客
10-17 197
目录一、在v-for循环中加入ref=“名称”二、在生命周期updated里将this.$refs.名称[0]（代表循环中第一个元素）赋值给变量三、在watch监听中，监听该变量直接".click()"即可实现页面加载调用v-for循环的第一个点击事件
uniapp（vue）在v-for中组件的事件中添加自己的参数
lsjweiyi的博客
04-16 1900
在html中给我们经常会因为数据是列表而需要用循环来展示数据。而其中有些组件是有回调事件的。这时候循环中如何知道是哪个数据在触发事件就是很重要的事，否则无法修改对应的数据。 举个例子，我们在购物车中需要用到uni-number-box去修改数量，购物车的商品肯定是用循环生成的。每个商品对应着一个uni-number-box。但是uni-number-box的change事件仅仅只返回当前数量的值。在代码中我们并不知道去给具体哪个商品修改数据： 而我们在html的循环中，可以有列表的下标，甚至是直接拿数据对
vue循环点击事件传参
08-09
在Vue中，我们可以使用v-for指令来循环渲染一个元素，并且可以结合@click事件给循环的元素绑定点击事件。在循环点击事件中传递参数，有几种方式可以实现。 第一种方式是使用匿名函数。我们可以在@click事件后面使用匿名函数来传递参数。例如： ```html <template> <div> <ul> <li v-for="(item, index) in items" :key="index" @click="handleClick(item)"> {{ item.name }} </li> </ul> </div> </template> <script> export default { data() { return { items: [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ] } }, methods: { handleClick(item) { console.log(item) } } } </script> ``` 在这个例子中，我们通过@click事件后面的匿名函数来传递item参数，点击时会将对应的item对象输出到控制台。 第二种方式是使用bind方法。我们可以使用Function.prototype.bind方法来创建一个绑定了参数的新函数。例如： ```html <template> <div> <ul> <li v-for="(item, index) in items" :key="index" @click="handleClick.bind(this, item)"> {{ item.name }} </li> </ul> </div> </template> <script> export default { data() { return { items: [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ] } }, methods: { handleClick(item) { console.log(item) } } } </script> ``` 在这个例子中，我们使用了handleClick.bind(this, item)来创建一个新的函数，并且将this和item作为参数传递进去。 无论是使用匿名函数还是bind方法，我们都可以在点击事件中传递参数，并在方法中获取到参数的值。这样就可以实现在Vue中循环点击事件传递参数的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜源Jerry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值