Vue v-for 의 input 또는 select 값 이 바 뀌 었 을 때 이벤트 동작 을 실행 합 니 다.

oninput 용법

<input type="text" id="myInput" oninput="myFunction()">
<script>
  function myFunction() {
 
  }
</script>
oninput Vue 에서 사용 하려 면 v-on:input 와 바 인 딩 id 로 써 야 할 때 이렇게 쓰 십시오:id="mnum'+index'주의 mnum 은 반드시 작은 따옴표 로 일 으 켜 야 한다.

jsMoney 방법

jsMoney:function(index){
 $("#m_num"+index).val()
}
onchange:input 의 텍스트 수정 후 input 에서 초점 을 잃 은 후 터치 합 니 다.
onblur:input 초점 을 잃 은 후 바로 터치
oninput:input 텍스트 입력 시 터치
추가 지식:VUE 프로젝트 에 this.$forceUpdate()를 사용 합 니 다.페이지 v-for 에서 item 속성 값 을 수정 한 후 페이지 v-if 가 변경 되 지 않 는 문 제 를 해결 합 니 다.
페이지 디 스 플레이:

구현 효과:목록 내용 의 전개,접 기 를 누 르 십시오.
코드:

<div class="invoice-list" v-for="(item,index) in invoiceData" :key="index">
 <div class="images"><img src="../../../../../static/images/invoice_pu.png" v-if="item.invoiceType == '0'"><img src="../../../../../static/images/invoice_zhuan.png" v-else-if="item.invoiceType == '1'"></div>
 <div class="text">
  <h3 v-if="item.invoiceType == '0'">       </h3>
  <h3 v-else-if="item.invoiceType == '1'">       </h3>
  <p><span>    :</span>{{item.enterpriseName}}</p>
  <p><span>  :</span>{{item.dutyParagraph}}</p>
  <transition name="fade">
  <div class="zhuanInfo" v-if="item.mark == true">
    <p><span>    :</span>{{item.address}}</p>
    <p><span>    :</span>{{item.contactNumber}}</p>
    <p><span>    :</span>{{item.accountOpeningBank}}</p>
    <p><span>    :</span>{{item.bankAccount }}</p>
  </div>
  </transition>
  <div class="zhuanMark" v-if="item.invoiceType == '1'">
   <p class="hideMark">
    <img src="../../../../../static/images/arrow_bottom.png" v-if="item.mark == false" @click="clickZhuanMark(index,$event)">
    <img src="../../../../../static/images/arrow_top.png" v-else @click="clickZhuanMark(index,$event)">
   </p>
  </div>
  <div class="list-radio"><input type="radio" value="" name="selectContact" @change="getInvoiceId(item.invoiceId)" /></div>
 </div>
</div>
v-for 렌 더 링 목록 입 니 다.실행 목록 을 접 고 펼 칠 때"clickZhuanMark"JS 는 다음 과 같 습 니 다.

clickZhuanMark(val,event){
 this.invoiceData[val].mark = !this.invoiceData[val].mark;
 
},
그러나 실제 적 으로 생각 했 던 것 처럼 효 과 를 실현 하지 못 하고 코드 를 수정 했다.

이.$forceUpdate()를 추가 합 니 다.강제 렌 더 링 을 진행 하여 효과 가 실 현 됩 니 다.검색 자 료 를 통 해 결 과 를 얻 을 수 있 습 니 다.데이터 차원 이 너무 많 기 때문에 render 함수 가 자동 으로 업데이트 되 지 않 았 습 니 다.수 동 으로 강제로 새로 고침 해 야 합 니 다.
이 Vue v-for 의 input 또는 select 의 값 이 바 뀌 었 을 때 트리거 이벤트 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.많은 응원 부탁드립니다.

좋은 웹페이지 즐겨찾기