vue-$nextTick - 렌더링된 페이지의 콜백을 기다립니다.
dom ， ， ， ， ， <div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1 ref="msg">msg1：{{msg1}}h1>
<h2>msg2：{{msg2}}h2>
<h3>msg3：{{msg3}}h3>
<button @click="changeMsg()"> button>
div>
name: 'Home',
data() {return {
msg1 : " ",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
//
// msg1 ， ， ， ，
//
this.msg1 = " ";
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
첫 번째 해결 방법 – 타이머 사용
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1 ref="msg">msg1：{{msg1}}h1>
<h2>msg2：{{msg2}}h2>
<h3>msg3：{{msg3}}h3>
<button @click="changeMsg()"> button>
div>
export default {
name: 'Home',
data() {return {
msg1 : " ",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
//
// msg1 ， ， ， ，
//
// ， 0 ， ，
//
this.msg1 = " ";
setTimeout(function() {
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
},0)
}
}
}
두 번째 방법(중요) - $nextTick
export default {
name: 'Home',
data() {return {
msg1 : " ",
msg2 : '',
msg3 : ''
}},
methods : {
changeMsg() {
//
// msg1 ， ， ， ，
//
// ， 0 ， ，
//
this.msg1 = " ";
setTimeout(function() {
this.msg2 = this.$refs.msg.innerHTML;
this.msg3 = this.$refs.msg.innerHTML;
},0)
//
// ， $nextTick
this.msg1 = " ";
this.$nextTick( () => {
// ，
this.msg2 = this.$refs.msg.innerHTML;
})
this.msg3 = this.$refs.msg.innerHTML;
}
}
}
</script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
시작 서버 보고서:but was actually of type'com.sun.proxy.$Proxy23 오류원인 1: 인터페이스 및 구현 클래스 이름이 규범에 맞지 않습니다. 인터페이스: 인터페이스 구현: 컨트롤러:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
