vue 감청 input 태그 의 value 값 방법

2299 단어 vue감청 하 다inputvalue
프로젝트 는 실시 간 검색 으로 데 이 터 를 조회 해 야 하기 때문에 input 태그 의 value 를 감청 해 야 합 니 다.여기 서 사용 하 는 전단 프레임 워 크 vue 입 니 다.

<input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/>
여기 서 포 인 트 는@input="search($event)"입 니 다.텍스트 상자 에 내용 입력 이 있 을 때 search 방법 을 호출 합 니 다.

/*    */
search: function (event) {
  //   ：    event.data        
  if(event.data!=null){
    this.materialName = event.data;    
  }
  //   ：  DOM   value 
  this.materialName = event.currentTarget.value;
  //   ：  js  
  this.materialName = document.getElementById("materialSearch").value;
}
확장 지식:Vue 감청 여러 input 상자 에 값 이 존재 하 는 지 확인 하 는 방법
다음 과 같다.

<div class="inner clear">
 <input type="text" placeholder="      " v-model="input1">
</div>

<div class="inner clear">
 <input type="text" placeholder="      " v-model="input2">
</div>

<div class="inner clear">
 <input type="text" placeholder="      " v-model="input3">
</div>

script 부분:

export default {
  data:function(){
  return {
   input1:'',
   input2:'',
   input3:'',
   ifExist:'',
  }
 },
}
페이지 에 숨겨 진 영역 삽입 하기:

<div style="display:none" >{{ exitsVal }}</div>
Vue 의 computed 속성 이용 하기

computed:{
  exitsVal:function(){
    this.ifExist=Number(Boolean(this.userName))+Number(Boolean(this.mailCode))+Number(Boolean(this.mailAd));
  }
 },
watch 로 data 의 ifExist 값 을 감청 합 니 다.

watch:{
ifExist(newVal,oldVal){
   if(Number(newVal) === 3){
      input            
   }else{
           
   }
  }
}
이상 의 vue 감청 input 태그 의 value 값 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.
VUE-Table 에 연 결 된 Input 은 render 를 통 해 양 방향 연결 데 이 터 를 구현 하 는 예제 입 니 다.
vue 패키지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage