Vue绑定自定义属性data, 并且获取数据

绑定

<ul class="right">
  <li
    class="right-item"
    :data-index="rItem"
    v-for="rItem in rightList"
    :key="rItem"
    @click="rightItemClick(rItem, $event)"
  >
    {{ rItem }}
  </li>
</ul>

• 代码 data-index中的index 可以修改为任意字符串, 到时候获取也是设置的字符串
• 通过事件获取, 以click点击事件为例, 传入最后一个参数$event即可

获取

使用event.target.dataset获取到所有通过data-绑定的自定义字段

rightItemClick(item, event) {
  console.log(item, event.target?.dataset.index)
}

注意, 不可以使用驼峰命名

当你想要使用驼峰进行绑定时, 获取到的数据是都会变成小写

<li
 class="right-item"
  :data-rIndex="rItem"
  v-for="rItem in rightList"
  :key="rItem"
  @click="rightItemClick(rItem, $event)"
>
  {{ rItem }}
</li>

• :data-rIndex="rItem"中rIndex会被转换为rindex