vue在标签中如何使用(data-XXX)自定义属性并获取

在Vue中，如果需要向组件或标签添加自定义属性，可以使用HTML5中的data-*属性。例如：data-xxx。在组件或标签中定义的自定义属性，可以使用Vue的$refs属性获取。

以下是示例：

示例1：

定义了一个自定义属性data-title，并且用v-bind将该属性绑定到组件的title属性中。

<template>
  <div>
    <h1 v-bind:title="myTitle" ref="myHeader">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTitle: 'What is the solution name?'
    }
  },
  mounted() {
    console.log(this.$refs.myHeader.dataset.title) // "What is the solution name?"
  }
}
</script>

解释如下：

• 组件中定义了一个h1标签，并将自定义属性data-title绑定到该标签的title属性上。
• 组件的data属性定义了一个属性myTitle，将该属性的值绑定到了h1标签的title属性上。
• 通过this.$refs.myHeader.dataset.title获取了自定义属性data-title的值。

示例2：

定义了一个自定义属性data-name，并且用v-for指令为3个组件绑定自定义属性data-name的值。

<template>
  <ul>
    <li v-for="(item, index) in myItems" :key="index" v-bind:data-name="item.name" ref="myList">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      myItems: [
        { name: 'John' },
        { name: 'Jack' },
        { name: 'Sarah' }
      ]
    }
  },
  mounted() {
    this.$refs.myList.forEach((item) => {
      console.log(item.dataset.name)
    })
  }
}
</script>

解释如下：

• 组件中定义了一个ul标签，并使用v-for指令为3个li标签绑定了自定义属性data-name的值。
• 组件的data属性定义一个数组myItems，该数组中包含3个对象，每个对象有一个name属性。
• 通过this.$refs.myList获取到所有的li标签，并通过forEach循环遍历获取每个li标签的自定义属性data-name的值。