집 > 기사 > 웹 프론트엔드 > vue2.0에서 입력 상자의 실시간 검색 및 업데이트를 구현하는 단계에 대한 자세한 설명

vue2.0에서 입력 상자의 실시간 검색 및 업데이트를 구현하는 단계에 대한 자세한 설명

이번에는 vue2.0에서 입력 상자의 실시간 검색 및 업데이트를 구현하는 단계에 대해 자세히 설명합니다. 입력 상자는 다음과 같습니다. 실제 사례를 살펴보겠습니다. 최근 vue2.0 프로젝트를 진행하다가 모바일 단말기 실시간 검색을 접하게 되었습니다

목록 업데이트 효과 사용자가 검색창에 고객의 전화번호나 이름을 입력하면 고객 목록이 나옵니다. 이에 따라 콘텐츠가 업데이트됩니다. 아래 그림을 보세요~·

html

<input type="text" id="getval" class="flex-1" @blur="serchhide" v-model="val" v-focus v-on:input ="inputFunc">

v-on:input ="inputFunc" 를 사용하여 변경 사항을 모니터링하세요. 입력 상자의 값 내용. 내용이 업데이트되면 inputFunc가 Function~~

js: v-on:input ="inputFunc" 来监听input框value内容的变化，如果内容更新会调用inputFunc函数~~

js：

在vue的method方法中写下inpuFunc函数，获取input框的value值然后传给渲染客户列表的这个函数queryData();

这里的第二个参数穿的false是因为queryData()会做一个数据请求，然后把匹配的数据在渲染出来，

这里面数据请求成功后，我们通过isConcat（是否拼接数组）参数控制，这个请求过来的数据是拼接在原来的customerlist数组内还是直接替换customerlist数组里面的数据，

所以因为这个时候展示的数据是匹配出来的，所以需要替换数组里面的数据，所以这个时候函数的参数isConcat=false

in vue 메소드 메소드에 inpuFunc 함수를 작성하고, 입력 상자의 값을 가져와 고객 목록을 렌더링하는 함수에 전달합니다. queryData() ;

여기서 두 번째 매개변수는 false입니다. 왜냐하면 queryData()가 데이터 요청을 한 다음 일치하는 데이터를 렌더링하기 때문입니다.

데이터 요청이 성공한 후 isConcat을 통해 제어합니다(배열 연결 여부). ) 매개변수는 요청된 데이터가 원래의 고객 목록 배열에 스플라이싱되는지 여부를 고객 목록 배열에 있는 데이터를 직접 교체하고,

그래서 이때 표시되는 데이터가 일치하므로 배열에 있는 데이터를 교체해야 하며, 그래서 이번에는 함수 매개변수 isConcat=false

참고 : 이 고객 목록 렌더링의 구조와 데이터 구조에 대해 간략하게 살펴보겠습니다.

데이터 구조:

여기서 행은 배열이므로 concat 함수를 사용하세요. js에서는 배열을 데이터에 연결합니다. 이는 데이터를 연결하여 새 데이터와 이전 데이터를 병합하는 것을 의미합니다.

🎜🎜React 서버 측 렌더링을 효율적으로 사용하는 방법🎜🎜🎜🎜🎜vue.js를 사용하여 레시피 편집🎜🎜🎜

위 내용은 vue2.0에서 입력 상자의 실시간 검색 및 업데이트를 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：