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

小火车况且况且

已于 2023-04-21 10:03:31 修改

阅读量1.2k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-04-21 09:56:25 首次发布

本文链接：https://blog.csdn.net/weixin_43972992/article/details/130280955

版权

Vue 专栏收录该内容

77 篇文章 3 订阅

订阅专栏

`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>