Home  >  Article  >  Web Front-end  >  How to get elements in vuejs

How to get elements in vuejs

藏色散人
藏色散人Original
2021-11-01 11:22:583567browse

Vuejs method of obtaining elements: 1. Open the corresponding code file; 2. Bind "ref="XXX"" to the element; 3. Pass "this.$refs.XXX" or "this.refs ['XXX']" to get it.

How to get elements in vuejs

The operating environment of this article: Windows 7 system, Vue version 2.0, DELL G3 computer.

How to get elements in vuejs?

Getting dom elements in Vue

Although Vue.js is a data-driven page, sometimes we also need to get dom objects to perform some operations.

Different versions of vue have different methods of obtaining dom objects

Vue.js 1.0 version, binding through v-el, and then obtaining it through this.els.XXX

Vue.js In version 2.0. We bind ref="XXX" to the element, and then obtain it through this.$refs.XXX or this.refs['XXX']

Take 2.0 as an example:

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
        console.log(this.$refs[&#39;hello&#39;]);
        console.log(this.$refs.hello);
      }
    }
  }
</script>

You need to be careful when operating dom in vue, especially when adding or deleting dom, especially when mounted() and created(). At this time, the dom object has not yet been generated, so it must be placed in this.nextTick () in the callback function.

Well, that’s it~~

Recommended: "The latest 5 vue.js video tutorial selections"

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn