如何在 Vue 中按类名查找所有元素

Vue 2月前 504

Vue 是一个非常强大的 JavaScript 框架，它为开发人员提供了很多方便的功能和工具。其中之一是按类名查找所有元素。在本文中，我们将探讨如何在 Vue 中按类名查找所有元素，并提供一些实用的示例。

首先，让我们看看如何在 Vue 中按类名查找单个元素。在 Vue 中，您可以使用 $refs 属性来查找单个元素。例如，假设我们有一个具有类名称 “my-class” 的 div 元素：

<div class="my-class" ref="myDiv">这是一个 div 元素</div>

要按类名查找此元素，我们可以使用以下代码：

this.$refs.myDiv

这将返回一个对该元素的引用。现在，让我们看看如何按类名查找所有元素。

在 Vue 中，您可以使用 $el 属性来访问组件的根元素。然后，您可以使用 querySelectorAll() 方法来按类名查找所有元素。例如，假设我们有一个组件，其中包含多个具有类名称 “my-class” 的 div 元素：

<template>
  <div>
    <div class="my-class">这是第一个 div 元素</div>
    <div class="my-class">这是第二个 div 元素</div>
    <div class="my-class">这是第三个 div 元素</div>
  </div>
</template>

要按类名查找所有这些元素，我们可以使用以下代码：

this.$el.querySelectorAll('.my-class')

这将返回一个 NodeList 对象，其中包含所有具有类名称 “my-class” 的元素。您可以使用 for 循环来遍历这些元素，并执行任何所需的操作。例如，以下代码将遍历所有具有类名称 “my-class” 的元素，并将它们的内容设置为 “Hello World!”：

let elements = this.$el.querySelectorAll('.my-class')
for (let i = 0; i < elements.length; i++) {
  elements[i].textContent = 'Hello World!'
}

现在，让我们看一些实际的示例。

示例 1：将所有具有类名称 “my-class” 的元素的背景颜色设置为红色

<template>
  <div>
    <div class="my-class">这是第一个 div 元素</div>
    <div class="my-class">这是第二个 div 元素</div>
    <div class="my-class">这是第三个 div 元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    let elements = this.$el.querySelectorAll('.my-class')
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.backgroundColor = 'red'
    }
  }
}
</script>

示例 2：将所有具有类名称 “my-class” 的输入元素的 value 设置为 “Hello World!”

<template>
  <div>
    <input type="text" class="my-class">
    <input type="text" class="my-class">
    <input type="text" class="my-class">
  </div>
</template>

<script>
export default {
  mounted() {
    let elements = this.$el.querySelectorAll('.my-class')
    for (let i = 0; i < elements.length; i++) {
      elements[i].value = 'Hello World!'
    }
  }
}
</script>