How to get the element object in vue

In Vue, we may need to obtain the DOM object of a certain element in order to perform some operations, such as modifying CSS styles or adding event listeners. This article will introduce how to obtain element objects in Vue.

1. Use the ref attribute to obtain the element object

Vue provides a special attribute ref, which can be used to obtain the element object. In the template, we can add a ref attribute to the element:

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

In the Vue instance, we can use the $refs attribute to access this element object:

export default {
  methods: {
    handleClick() {
      this.$refs.myButton.style.backgroundColor = 'red';
    }
  }
}

In this example, when the user clicks the button, we change the background color of the button to red. Through this.$refs.myButton, you can get the DOM object of the button and then modify it.

Note that $refs is an object, with the value of the ref attribute as the key and the corresponding element object as the value.

2. Obtain the element object through event parameters

In Vue's event processing function, the event parameters are automatically passed to the callback function. This event parameter contains information about the current event, including the element object that triggered the event.

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

export default {
  methods: {
    handleClick(event) {
      event.target.style.backgroundColor = 'red';
    }
  }
}

In this example, we obtain the element object that triggered the click event through the parameters of the click event event, and then modified its background color.

Note that event.target points to the element object that currently triggers the event, not the element object in the definition template.

3. Use the $el attribute to get the component root element object

When we use the Vue component, the component itself is also an object similar to an element. The root element after component rendering can be obtained through the $el attribute.

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

import MyComponent from './MyComponent.vue';

export default {
  mounted() {
    const root = this.$refs.myComponent.$el;
    root.style.backgroundColor = 'red';
  },
  components: {
    MyComponent,
  }
}

In this example, we introduced the custom component MyComponent and used it in the Vue instance. Obtain the reference to this component instance through the refs attribute, and use the $el attribute in the mounted life cycle function to obtain the root element object after the component is rendered, and operate on it.

Note that the component root element object can only be obtained after the component is rendered, so it needs to be operated in the mounted life cycle function.

Summary

In Vue, there are many ways to obtain element objects:

• Use the ref attribute to obtain the element object, through $refsAttribute access.
• In the event processing function, obtain the element object that triggered the event through the event parameters.
• In the Vue component, use the $el property to obtain the root element object after the component is rendered.

These methods are very simple and easy to understand and can be selected according to the specific situation.

The above is the detailed content of How to get the element object in vue. For more information, please follow other related articles on the PHP Chinese website!