How to get elements in vuejs

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.

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!