vue input輸入框模糊查詢的示例代碼
更新時間：2018年05月22日 09:46:01 作者：Miss_Ye
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue 模糊查詢功能
原理：原生js的search() 方法，用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。如果沒有找到任何匹配的子串，則返回 -1。
input輸入框，模糊查詢
<template>
<div>
<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>
</div>
</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>
效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue-cli項目的搭建方法，文中圖片介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
本文將探討 Vue 版本升級后常見的不兼容問題,并提供相應(yīng)的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3 Element Plus表單自定義校驗的實現(xiàn)全過程
這篇文章主要介紹了Vue3 Element Plus表單自定義校驗的實現(xiàn)全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實現(xiàn)對前端界面的開發(fā)工作。2021-05-05
解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題
這篇文章主要介紹了解決vue2+vue-router動態(tài)路由添加及路由刷新后消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了Vue2.0+SVG實現(xiàn)音樂播放圓形進度條組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了Vite引入虛擬文件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10