JIYIK CN >

Vue is a very powerful JavaScript framework that provides developers with a lot of convenient features and tools. One of them is finding all elements by class name. In this article, we will explore how to find all elements by class name in Vue and provide some practical examples.

First, let's look at how to find a single element by class name in Vue. In Vue, you can use the $refs property to find a single element. For example, suppose we have a div element with the class name "my-class":

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

To find this element by class name, we can use the following code:

this.$refs.myDiv

This will return a reference to the element. Now, let's see how to find all elements by class name.

In Vue, we can use the $el property to access the root element of a component. You can then use the querySelectorAll() method to find all elements by class name. For example, suppose we have a component that contains multiple div elements with the class name "my-class":

<template>
  <div>
    <div class="my-class">This is the first div element</div>
    <div class="my-class">This is the second div element</div>
    <div class="my-class">This is the third div element</div>
  </div>
</template>

To find all of these elements by class name, we can use the following code:

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

This will return a NodeList object containing all elements with the class name "my-class". You can use a for loop to iterate through these elements and perform any desired operations. For example, the following code will iterate through all elements with the class name "my-class" and set their content to "Hello World!":

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

Now, let's look at some real-world examples.

Example 1 : Set the background color of all elements with the class name "my-class" to red

<template>
  <div>
    <div class="my-class">This is the first div element</div>
    <div class="my-class">This is the second div element</div>
    <div class="my-class">This is the third div element</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>

Example 2 : Set the value of all input elements with the class name "my-class" to "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>

In these examples, we used the $el property and querySelectorAll()method to find all elements by class name and performed some operations. These examples can help you better understand how to find all elements by class name in Vue and provide more practical functions for your project.