이번에는 Vue 입력 상자에 퍼지 쿼리를 구현하는 방법과 Vue 입력 상자에 퍼지 쿼리를 구현하기 위한 Notes가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.
Vue 퍼지 쿼리 기능
원리: 네이티브 js의 search() 메서드는 문자열에 지정된 하위 문자열을 검색하거나 정규 표현식과 일치하는 하위 문자열을 검색하는 데 사용됩니다. 일치하는 하위 문자열이 없으면 -1이 반환됩니다.
입력 입력 상자, 퍼지 쿼리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <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>
|
로그인 후 복사
효과는 다음과 같습니다.
![](https://img.php.cn/upload/article/000/061/021/cf6e7eabfb56b5c0d62cd76846014114-0.png)
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!
추천 자료:
mpvue 애플릿 프로젝트 구축 방법
VUE2.0에서 Jsonp를 사용하는 단계에 대한 자세한 설명
위 내용은 Vue 입력 상자에 퍼지 쿼리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!