最近写项目有涉及到网页模块的拖拽,其中涉及到了循环体的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"]{ }
还有 ~=, |=, ^=, $=, *= 多种匹配方式有兴趣可以去搜索了解一下~
就不指路了,自己去搜哦!!