vue input輸入框模糊查詢的示例代碼

更新時(shí)間：2018年05月22日 09:46:01 作者：Miss_Ye

本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Vue 模糊查詢功能

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