Two ways for Vue to get DOM elements and set attributes

This article mainly brings you two implementation methods for vue to obtain DOM elements and set attributes. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

I thought of 2 methods here:

Method 1:

Add id directly to the corresponding element, and then document.getElementById("id") ;Get, then set the corresponding attributes or styles

Method 2:

Use ref, add ref="name" to the corresponding element and then use this.$refs.name to get the element

Note: Before obtaining the corresponding element, you must mount it in the mount hook, otherwise the value obtained will be empty.

If you add an id to a subcomponent and modify the custom attribute, directly Will load the outer p corresponding to the modified subcomponent, and will not change the value of the original custom attribute of the subcomponent

If you add ref to the subcomponent, then get the DOM element and change the corresponding self Define the value of the attribute, vue will report an error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

Related recommendations:

Use the name attribute of html to get the dom element

Get several extensions and abbreviations of DOM objects_javascript skills

How to use JavaScript to obtain the position and size of DOM elements_Basic knowledge

The above is the detailed content of Two ways for Vue to get DOM elements and set attributes. For more information, please follow other related articles on the PHP Chinese website!