vue3如何在dom上添加一个属性

在Vue 3中，要在DOM元素上添加一个自定义属性，通常会直接通过模板绑定或者在JavaScript中使用`ref`、`v-bind`、或者Vue实例的`$set`方法。以下是几种常见的方式：

1. **模板绑定**:

<template>
  <div :customAttr="yourValue">内容</div>
</template>

<script>
export default {
  data() {
    return {
      yourValue: '这是值',
    };
  },
};
</script>

这里的`:customAttr`就是你在DOM元素上添加的自定义属性。

2. **ref**:

<template>
  <div ref="customElement"></div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const customElement = ref(null);
    // 在组件的某个生命周期钩子或事件处理函数中
    customElement.value.customAttr = 'yourValue';
  },
};
</script>

这样`customElement`就会持有DOM元素，你可以设置其`.customAttr`。

3. **Vue实例的 `$set`** (主要用于动态修改响应式数据):

this.$set(this.$el, 'customAttr', 'yourValue');

这会在当前元素上添加一个名为`customAttr`的新属性。