Vue에서 DOM 요소를 얻는 방법-JS 튜토리얼-php.cn

Vue에서 DOM 요소를 얻는 방법

亚连

풀어 주다： 2018-06-14 17:47:31

원래의

4560명이 탐색했습니다.

이 글에서는 주로 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;
}

로그인 후 복사

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