vuejs에서 요소를 얻는 방법

Vuejs의 요소 획득 방법: 1. 해당 코드 파일을 엽니다. 2. "ref="XXX""를 요소에 바인딩합니다. 3. "this.$refs.XXX" 또는 "this.refs['XXX'"를 전달합니다. ]"를 얻으려면.

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.0, DELL G3 컴퓨터.

vuejs에서 요소를 얻는 방법은 무엇인가요?

Vue에서 DOM 요소 가져오기

Vue.js는 데이터 기반 페이지이지만 때로는 일부 작업을 수행하기 위해 DOM 개체를 가져와야 할 때도 있습니다.

vue 버전마다 dom 객체를 얻는 방법이 다릅니다

Vue.js 1.0 버전, v-el 바인딩을 통해, 그리고 this.els.XXX

Vue.js 2.0 버전을 통해 얻습니다. ref="XXX"를 요소에 바인딩한 다음 this.$refs.XXX 또는 this.refs['XXX']

2.0을 예로 들어 보겠습니다.

<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>

조심해야 합니다. vue에서 dom을 조작할 때, 특히 dom을 추가하거나 삭제할 때, 특히 Mounted() 및 Created()를 수행할 때 dom 객체가 아직 생성되지 않았으므로 this.nextTick()의 콜백 함수에 배치해야 합니다.

그게 다예요~~

추천: "5개의 vue.js 비디오 튜토리얼 중 최신 선택"

위 내용은 vuejs에서 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!