v-for循环,循环体绑定id

最近写项目有涉及到网页模块的拖拽,其中涉及到了循环体的id绑定问题,

如果单纯的写 id=“xxx” ,是肯定的不行的,会把每个循环体绑定到同一个id上,也就无法完成对不同循环体的不同操作,(因为模块的拖拽涉及到模块的位置等属性,所以要区分每个循环体所绑定的属性)

解决方法也很简单:——  给id拼接一个唯一的索引值,并使用v-bind绑定

(相信大家也会想到要拼接,只是不知道正确的拼接方式,根据我的经验来说,格式一般都是:要先用一个引号将内容包起来,然后在这个引号里面拼接,单引号双引号都可以,只要保证是单双引号互相嵌套,不要用相同的引号套就可以,然后随便试一试就试出来了……)

:id='"idName"+index'

整体循环+绑定的代码如下:

<el-carousel-item v-for="(item,index) in image" :key="index">
	<div :id='"idName"+index' @mouseover="move">
		<div :id='"idName2"+index'>
			<p :id='"p1"+index' v-on:dblclick="contentEdit">{{ item.title }}</p>
			<p :id='"p2"+index' v-on:dblclick="contentEdit">{{ item.text }}</p>
		</div>
	</div>
	<img style="width:100%;height:auto;overfow:hidden" :src="item.imgURL">
</el-carousel-item>

进而也了解到css选择器模糊匹配用法:

for 以个脏炮:

在此例中,想要写 id为“idName0”~"idName5"的id属性就可以写成

// 以idName开头的id
[id^="idName"]{ }

还有 ~=, |=, ^=, $=, *= 多种匹配方式有兴趣可以去搜索了解一下~

就不指路了,自己去搜哦!!

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值