一个动态生成的v-for数组列表。
<div v-for:"value in items"> <span id="title" name="title">{{value.title}}</span> ... <div> <a href="javascript:;" :id="value.id" @click="fn($event)">删除</a> </div> </div>
我最初没有给span标签设置动态id,数据的id名都一样。
在想获取span内的数据时,不想因为这点小需求引入jquery,也不想写太多js让页面复杂。
就用document.getElementsByName('title')[tap_id-1].innerText获取了数据。(其实这样是不对的,span没有name属性)
刚开始没有问题。但后来做到删除模块时。删除了这一项的dom。所有“同名title的name属性”的数量也应该减一。
难道我还得设置个全局变量记录删除的次数和删除的位置?太不现实。
于是我灵光一闪。
用v-bind:id="'title_'+value.id"绑定了id。
就可以轻松的用document.getElementById获取数据了。
========
vue渲染数据真是轻松啊,继续学习~