Vue에서 DOM 요소를 얻는 방법

이 글에서는 주로 DOM 요소를 얻기 위한 vue의 주의 사항과 dom 요소를 얻기 위한 vue의 내용을 소개합니다. 필요한 친구들은 참고하면 됩니다.

mounted(){
    setTimeout(()=>{
     this.contentToggle();
    },1000)
  },

methods:{
   contentToggle(){
    console.log(this.$refs.bodyFont.offsetHeight);
   }
  }

vue가 dom 요소의 높이를 얻으려면 일반적으로 다음과 같이 생각할 수 있습니다. 마운트된 함수에 작성합니다. 즉, DOM을 로드한 후 결과를 얻었지만 결과는 우리가 생각한 것과 다릅니다. 우리도 그것을 얻기 위해

this.$nextTick(()=>{
   
    //函数
})

를 사용하려고 생각했지만 전혀 쓸모가 없다는 것을 알았습니다. /. .

따라서 가장 좋은 방법은 setTimeout 타이머를 사용하는 것입니다. 시간을 0으로 설정할 수 있지만 때로는 적용되고 때로는 적용되지 않을 수도 있으므로 작은 시간 값을 추가하는 것이 더 안전합니다. 당신이 얻는 것은 DOM 로딩입니다. 마지막으로 이 원칙은 Vue의 많은 값 전송 문제에 적용됩니다. 처음에 전달된 값을 얻을 수 없으면 setTimeout을 사용하십시오.

ps: VUE는 DOM 요소 콘텐츠를 얻습니다.

ref를 통해 dom 요소를 얻습니다.

vue 공식 웹사이트의 ref에 대한 설명

ref는 요소 또는 하위 구성 요소에 대한 참조 정보를 등록하는 데 사용됩니다. 참조 정보는 상위 컴포넌트의 $refs 객체에 등록됩니다. 일반 DOM 요소에 사용된 경우 참조는 DOM 요소를 가리키고, 하위 구성 요소에 사용된 경우 참조는 구성 요소 인스턴스를 가리킵니다.

v-for가 요소나 구성 요소에 사용되면 참조 정보에 DOM이 포함됩니다. 노드 또는 구성요소 인스턴스 배열

예를 들어, 지금 달성하고 싶은 것은 v-for로 생성된 li를 클릭하고 요소의 값을 얻는 것입니다.

우선, 현재 클릭된 li 요소를 가져와야 합니다 . 우리가 해야 할 일은

1. dom

<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
  <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

에 클릭 이벤트와 ref 속성을 추가하는 것입니다. 그런 다음 클릭 이벤트 메서드에서 ref를 사용합니다.

setPageMenu(index) {
//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
  let getMenuText = this.$refs.menuItem[index].innerText;
}

위 내용은 모두를 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 됩니다.

관련 기사:

웹팩의 devtool을 사용하여 자세히 설명

자바스크립트에서 암시적 호출을 사용하는 방법은 무엇인가요?

vue.js 대규모 단일 페이지 애플리케이션 구축 방법

Moments에서 WeChat 공유를 구현하고 Vue에서 친구 보내기

vuex 구현 방법에 대한 자세한 설명(자세한 튜토리얼)

vue.js WeChat Pay를 통해 구현

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