Vue 입력 상자에 퍼지 쿼리를 구현하는 방법

이번에는 Vue 입력 상자에 퍼지 쿼리를 구현하는 방법과 Vue 입력 상자에 퍼지 쿼리를 구현하기 위한 Notes가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

Vue 퍼지 쿼리 기능

원리: 네이티브 js의 search() 메서드는 문자열에 지정된 하위 문자열을 검색하거나 정규 표현식과 일치하는 하위 문자열을 검색하는 데 사용됩니다. 일치하는 하위 문자열이 없으면 -1이 반환됩니다.

입력 입력 상자, 퍼지 쿼리

<template>
 <p>
  <input type="text" placeholder="请输入..." v-model="searchVal">
  <ul>
   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>
  </ul>
 </p>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   searchVal: "",
   items: [
    {
     name: "上海",
     value: "sh"
    },
    {
     name: "北京",
     value: "bj"
    },
    {
     name: "重庆",
     value: "cq"
    },
    {
     name: "嗨嗨嗨",
     value: "hhh"
    },
    {
     name: "海上",
     value: "hs"
    },
    {
     name: "京都",
     value: "jd"
    }
   ]
  };
 },
 methods: {},
 computed: {
  NewItems() {
   var _this = this;
   var NewItems = [];
   this.items.map(function(item) {
    if (item.name.search(_this.searchVal) != -1) {
     NewItems.push(item);
    }
   });
   return NewItems;
  }
 }
};
</script>

효과는 다음과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!

추천 자료:

mpvue 애플릿 프로젝트 구축 방법

VUE2.0에서 Jsonp를 사용하는 단계에 대한 자세한 설명

위 내용은 Vue 입력 상자에 퍼지 쿼리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!