VUE 장 은 이벤트 수요 에 따라 상세 하 게 설명 합 니 다.

2293 단어 vue이벤트
개발 과정 에서 사건 의 수요 에 따라 제 가 간단하게 몇 가지 사건 의 수 요 를 소개 합 니 다.
 수요 1:숫자 에 따라 누적 또는 누적

HTML：

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
   <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="Loop_Sub(item.CartID)" @touchend="clearLoop()">-</button>
   <input class="mui-numbox-input" type="number" :value="item.Cart_Nums"/>
   <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="Loop_Add(item.CartID)" @touchend="clearLoop()">+</button>
</div>
JS:

var vm = new Vue({     
　　el: "#vue-container",
  data:{
　　　　Loop:null
　　},
　　methods:{//      
　　　　Loop_Add:function(ID){
　　　　　　//    
　　　　　　clearInterval(vm.Loop);//       ，         
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　$num=$target.val();
　　　　　　$target.val(parseInt($num)+1);
　　　　　　},100);
　　　　},
　　　　//      
  　　Loop_Sub:function(ID){
　　　　　　//    
　　　　　　clearInterval(vm.Loop);//       ，         
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　　　$num=$target.val();
　　　　　　　　if($num>0){
　　　　　　　　　　$target.val(parseInt($num)-1);
　　　　　　　　}else{
　　　　　　　　　　clearInterval(vm.Loop);
　　　　　　　　}
      　　//     
　　　　　　},100);
　　　　},
　　　　clearLoop:function(){
　　　　　　clearInterval(vm.Loop);
　　　　}
　　}
})
 이 데 모 는 모 바 일 에서 테스트 되 기 때문에 터치 이 벤트 를 사용 합 니 다.방법 은 간단 합 니 다.touch start 를 할 때 Interval 타 이 머 를 등록 하고 touch end 를 할 때 타 이 머 를 지 워 버 리 면 지속 적 으로 누적 되 거나 누적 되 는 효 과 를 얻 을 수 있 습 니 다.
필요 2:시간 지연 이벤트 에 따라 촉발
이런 수요 도 비교적 간단 하고 수요 와 유사 하 다.터치 스타트 에 setTimeout 타 이 머 를 추가 하면 이벤트 가 실 행 됩 니 다.터치 엔 드 에서 타 이 머 를 제거 하면 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
ui-router 에서 ocLazy Load 와 resolve 를 사용 하 는 구체 적 인 방법
vue router 고양이 아래쪽 탐색 표시 줄 기능 모방

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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