vue 감청 input 태그 의 value 값 방법

프로젝트 는 실시 간 검색 으로 데 이 터 를 조회 해 야 하기 때문에 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 값 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.