이번에는 입력 기반 동적 퍼지 쿼리를 소개해 드리겠습니다. 입력 기반 동적 퍼지 쿼리의 주의 사항은 무엇인가요? 다음은 실제 사례입니다.
최근 jQuery를 사용하여 동적 퍼지 쿼리를 구현할 때, 오랫동안 검색했지만 Vue.js의 watch 속성만큼 사용하기 쉬운 동적 퍼지 쿼리 방법을 찾을 수 없었습니다. 지금까지 겪은 함정과 동적 쿼리를 구현하는 여러 가지 방법을 공유하겠습니다.
1. jQuery의 Change() 메소드.
이 방법은 입력 상자의 초점을 잃을 때만 이벤트를 실행합니다. 이 방법에 대해 완전히 익숙하지 않은 것일 수도 있습니다. 몇 가지 팁을 공유해 보세요.
<input type="text" id="n3"/> var $n3=$("#n3);//定位到input框 $n3.change(function(){ this.query_search($n3.val());//query_search为模糊查询的方法 })
change()function은 핸들러 함수를 일치하는 각 요소의 변경 이벤트에 바인딩하는 데 사용됩니다. 이 함수는 변경 이벤트를 트리거하는 데에도 사용할 수 있습니다. 또한 이벤트 핸들러 함수에 몇 가지 추가 데이터를 전달할 수도 있습니다. 텍스트 내용이나 옵션이 변경되면 변경 이벤트가 트리거됩니다. 이 이벤트는 및
2. JQuery의 keyup 또는 keydown 이벤트를 수신합니다.
이 메서드는 각 키의 트리거 이벤트를 모니터링할 수 있으며, 누를 때마다 퍼지 쿼리 메서드를 응답 이벤트에 바인딩할 수 있습니다. 이벤트가 발생하지만 그렇게 하면 데이터베이스에 대한 부담이 크게 증가합니다. 이를 운영하는 사람이 많고 캐시가 없으면 데이터베이스가 몇 분 안에 폭발합니다.
<input type="text" id="#n3"/> var $n3=$("#n3");//定位到input框 $n3.keyup(function(){ this.query_search($n3.prop("value"));//query_search为模糊查询的方法 })
3. Vue.js의 watch 속성 관찰자 방법을 사용하세요.
이 메서드는 입력 상자의 속성 변경을 동적으로 관찰할 수 있으며, 입력 상자의 값이 변경되는 한 응답 메서드가 동적으로 호출됩니다.
마지막으로 언급할 가치가 있는 것은 입력 텍스트 상자에서 값을 얻는 세 가지 방법이 있다는 것입니다.
1. ") . 이 방법은 기본 값만 얻을 수 있습니다. 즉, CSS 코드에 원래 정의된 값은 페이지가 처음 표시될 때 동일한 값이 되며 이 값은 변경되지 않습니다.
2.prop("value")를 통해 획득합니다. 이 방법을 사용하면 기본값은 물론 변경된 값도 얻을 수 있습니다. 변경하기만 하면 얻을 수 있습니다.
3.val()을 통해 얻습니다. 이는 prop("value")와 비슷한 느낌입니다.
4. Vue.js의 v-model 바인딩을 사용하여 얻을 수도 있으므로 4가지 방법으로 계산됩니다.
이러한 내용은 여러 테스트를 통해 도출된 개인적인 결론입니다. 권위있는 진술은 없습니다. 실수가 있으면 누군가가 제때에 수정해 주기를 바랍니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 입력을 기반으로 한 동적 퍼지 쿼리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!