HTML5 新特性 dataset

最新推荐文章于 2024-04-22 10:57:48 发布

alokka

最新推荐文章于 2024-04-22 10:57:48 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/m0_51431448/article/details/122117269

版权

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。

<div data-id="test">test</div>

这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性。下面是两个例子：

例1：

<body>
  <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div>
  <div id="div2" data-index="1" data-a="哈哈哈哈">test2</div>
  <div id="div3" data-index="2" data-a="666" data-my-offer>test3</div>
 
<script>
  for(let i = 0; i < 3; i++) {
    let ids = document.getElementById(`div${i + 1}`)
    console.log(ids.dataset,'看一下dataset')
  }
    
</script>
</body>

在这里插入图片描述

例2：

<template>
  <div class="home">
        <div
          v-for="(item,index) in 3"
          :key="item"
          :ref="'div' + index"
          :data-index="index"
          :id="'div' + index">
          test{{item}}
        </div>
  </div>
</template>
<script>
export default {
  mounted() {
    // 这里通过id的方式去获取data- 正常获取
    for(let i = 0; i < 3; i++) {
      let ids = document.getElementById(`div${i}`)
      console.log(ids.dataset)
    }
 
    /*
     * 这里通过ref的方式来获取，出现一点点小问题
     * 正常给一个 dom 元素绑定 ref ，我们通过this.$refs可以正常拿到dom元素；给组件绑定ref，我们可以通过this.$refs去调用组件的方法等等
     * 但是这里，ref 和 v-for 一起使用的时候却一直拿不到，打印发现拿到是个数组，第一项才是我们要的dom元素，我也不知道为啥，就直接采用了下标的方式取的
     * 
     * 官方解释：当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
     */
    for(let i = 0; i < 3; i++) {
      let divRefs = `div${i}`
      console.log(this.$refs[divRefs][0].dataset)
    }
  }
}
</script>

在这里插入图片描述

alokka

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 新特性 dataset

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放。<div data-id="test">test</div>这里的data-前缀就被称为data属性 ;我们可以通过dataset来获取data属性。下面是两个例子：例1：<body> <div id="div1" data-index="0" data-a="牛啊牛啊">test1</div> <div id="div2" data-i
复制链接

扫一扫