vue input輸入框模糊查詢的示例代碼
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實現(xiàn)數(shù)據(jù)控制視圖的原理解析
這篇文章主要介紹了vue如何實現(xiàn)的數(shù)據(jù)控制視圖的相關(guān)知識,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事
這篇文章主要介紹了詳解Vue Elementui中的Tag與頁面其它元素相互交互的兩三事,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能
這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能,開始時間、結(jié)束時間可配置,根據(jù)當(dāng)前時間初始化位置,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05在Vue中使用xlsx組件實現(xiàn)Excel導(dǎo)出功能的步驟詳解
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項常見的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下2023-10-10詳解.vue文件中style標(biāo)簽的幾個標(biāo)識符
這篇文章主要介紹了詳解.vue文件中style標(biāo)簽的幾個標(biāo)識符,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏
這篇文章主要介紹了vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04基于vue+echarts實現(xiàn)柱狀圖漸變色效果(每個柱子顏色不同)
前段時間的vue項目中用到了echarts柱狀圖,由于UI設(shè)計稿中要求使用漸變色,并且每個柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實現(xiàn)方案分享如下2024-05-05