vue input輸入框模糊查詢的示例代碼
Vue 模糊查詢功能
原理:原生js的search() 方法,用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串。如果沒有找到任何匹配的子串,則返回 -1。
input輸入框,模糊查詢
<template> <div> <input type="text" placeholder="請(qǐng)輸入..." 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>
效果如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)數(shù)據(jù)控制視圖的原理解析
這篇文章主要介紹了vue如何實(shí)現(xiàn)的數(shù)據(jù)控制視圖的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Vue3中實(shí)現(xiàn)微信掃碼登錄的步驟和代碼示例
在 Vue 3 中實(shí)現(xiàn)微信掃碼登錄,涉及到前端生成二維碼、監(jiān)聽微信回調(diào)以及與后端的交互,本文給大家介紹了一個(gè)詳細(xì)的實(shí)現(xiàn)步驟和代碼示例,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能,開始時(shí)間、結(jié)束時(shí)間可配置,根據(jù)當(dāng)前時(shí)間初始化位置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05在Vue中使用xlsx組件實(shí)現(xiàn)Excel導(dǎo)出功能的步驟詳解
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項(xiàng)常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動(dòng)態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實(shí)現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下2023-10-10vue實(shí)現(xiàn)小球滑動(dòng)交叉效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)小球滑動(dòng)交叉,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符
這篇文章主要介紹了詳解.vue文件中style標(biāo)簽的幾個(gè)標(biāo)識(shí)符,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)控制el-table表格列的展示與隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
前段時(shí)間的vue項(xiàng)目中用到了echarts柱狀圖,由于UI設(shè)計(jì)稿中要求使用漸變色,并且每個(gè)柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實(shí)現(xiàn)方案分享如下2024-05-05