Vue 2.0 감청 텍스트 상자 내용 변화 및 ref 사용 설명 기반
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="items.type" ref="type" />
<div class="show"> ：{{items.type}}</div>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
items: {
type: ' :'
}
},
watch: {
items: {
handler: function() {
alert(this.$refs.type.value);
},
deep: true
}
}
})
</script>
</body>
</html>
ref 설명
<div class="touchscroll">
//
</div>
하지만 ref 로 연결 하면 dom 노드 를 가 져 올 필요 가 없습니다.위의 div 에 div 를 연결 한 다음$refs 에서 호출 하면 됩 니 다.
그래서 위 에 다음 과 같이 쓸 수 있다.
<div class="touchscroll" ref='div'>
//
</div>
this.$refs.div.scrollTop.Vue 2.0 감청 텍스트 상자 의 내용 변화 와 ref 의 사용 설명 을 바탕 으로 하 는 이 소 개 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
