vue类名如何获取动态生成的元素

获取动态生成元素的类名

示例 1

考虑以下的 HTML 结构：

<div id="app">
  <button @click="addDynamicElement">添加元素</button>
  <div class="dynamic-element">动态生成的元素</div>
</div>

我们希望每次点击“添加元素”按钮后，动态生成一个带有独特类名的 <div> 元素，并且能够获取到该元素的类名。

在 Vue 组件中，实现这一功能的代码如下所示：

<template>
  <div id="app">
    <button @click="addDynamicElement">添加元素</button>
    <div :class="dynamicElementClass">动态生成的元素</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicElementClass: 'dynamic-element'
    };
  },
  methods: {
    addDynamicElement() {
      const newElementClass = 'dynamic-element-' + this.dynamicElementClass.split('-').pop();
      this.dynamicElementClass = newElementClass;
    }
  }
};
</script>

上述代码中，我们在 data 中定义了 dynamicElementClass 属性，并将其初始值设置为 'dynamic-element'。每次点击“添加元素”按钮后，addDynamicElement 方法会根据现有的类名生成一个新的类名，并将其赋值给 dynamicElementClass 属性。然后，在 HTML 模板中，我们通过 :class 绑定动态计算的类名，从而将新的类名应用到动态生成的元素上。

示例 2

在示例 1 中，我们是通过动态计算类名的方式来实现动态生成元素的类名。另一种方法是使用 Vue 的 ref 属性来获取动态生成的元素的类名。

在以下的示例中，我们在点击“添加元素”按钮后，通过 ref 属性来获取动态生成元素的引用，并获取其类名：

<template>
  <div id="app">
    <button @click="addDynamicElement">添加元素</button>
    <div ref="dynamicElement" class="dynamic-element">动态生成的元素</div>
    <button @click="getDynamicElementClass">获取元素类名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    addDynamicElement() {
      const newElement = document.createElement('div');
      newElement.className = 'dynamic-element';
      newElement.textContent = '动态生成的元素';
      this.$refs.dynamicElement.appendChild(newElement);
    },
    getDynamicElementClass() {
      const dynamicElement = this.$refs.dynamicElement.querySelector('.dynamic-element');
      const dynamicElementClass = dynamicElement.className;
      console.log(dynamicElementClass);
    }
  }
};
</script>

上述代码中，我们首先使用 document.createElement() 方法创建一个新的 <div> 元素，并设置其类名和文本内容。然后，我们将新的元素追加到 dynamicElement 引用所指向的元素中。最后，通过 querySelector() 方法获取动态生成元素的类名，并将其打印到控制台中。

这种方法适用于在 Vue 组件之外生成动态元素的场景，通过 ref 属性，我们可以轻松地获取到动态生成元素的类名或其他属性。

以上就是关于如何获取动态生成元素的类名的完整攻略和两个示例的说明。希望能帮助到你。