vue實(shí)現(xiàn)input輸入模糊查詢的三種方式
更新時(shí)間：2022年08月14日 11:03:21 作者：星月前端
本文主要介紹了vue實(shí)現(xiàn)input輸入模糊查詢的三種方式嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1 計(jì)算屬性實(shí)現(xiàn)模糊查詢
vue 中通過(guò)計(jì)算屬性實(shí)現(xiàn)模糊查詢,創(chuàng)建 html 文件，代碼直接放入即可。
這里自己導(dǎo)入 vue，我是導(dǎo)入本地已經(jīng)下載好的。
<script src="./lib/vue-2.6.12.js"></script>
演示：
打開(kāi)默認(rèn)顯示全部
輸入關(guān)鍵字模糊查詢，名字和年齡都可以
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>人員列表</h2>
<input type="text" placeholder="請(qǐng)輸入名字" v-model="keyWord">
<table>
<thead>
<tr>
<td>名字</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in fillist" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
?
<script src="./lib/vue-2.6.12.js"></script>
?
<script>
const vm = new Vue({
el: '#app',
data: {
keyWord:'',
list:[
{ name: '張三', age: '18' },
{ name: '張四', age: '17' },
{ name: '張五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
]
},
computed:{
fillist(){
// 返回過(guò)濾后的數(shù)組
return this.list.filter((p)=>{
return p.name.indexOf(this.keyWord) !==-1 || p.age.indexOf(this.keyWord) !==-1
})
}
}
})
</script>
</body>
</html>2 watch 監(jiān)聽(tīng)實(shí)現(xiàn)模糊查詢
vue 中通過(guò)watch 監(jiān)聽(tīng)實(shí)現(xiàn)模糊查詢
vue 中通過(guò)計(jì)算屬性實(shí)現(xiàn)模糊查詢,創(chuàng)建 html 文件，代碼直接放入即可。
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>人員列表</h2>
<input type="text" placeholder="請(qǐng)輸入名字" v-model="keyWord">
<table>
<thead>
<tr>
<td>名字</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in fillist" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
?
<script src="./lib/vue-2.6.12.js"></script>
?
<script>
const vm = new Vue({
el: '#app',
data: {
keyWord:'',
list:[
{ name: '張三', age: '18' },
{ name: '張四', age: '17' },
{ name: '張五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
fillist:[]
},
watch:{
keyWord:{
immediate:true,//在框的值還沒(méi)變化時(shí)執(zhí)行如下函數(shù)顯示出所有的情況
handler(val){
this.fillist = this.list.filter((p)=>{
return p.name.indexOf(val) !==-1 || p.age.indexOf(val) !==-1
})
}
}
}
})
</script>
</body>
</html>演示和計(jì)算屬性的一樣。。
3 通過(guò)按鈕點(diǎn)擊實(shí)現(xiàn)模糊查詢
這里我是在 vue-cli 中完成的，完整代碼如下。
vue.app 代碼：
<template>
<div id="app">
<!-- 輸入框 -->
<input type="text" v-model="value" placeholder="請(qǐng)輸入姓名/年齡" />
<!-- 查詢按鈕 -->
<button @click="search">查詢</button>
<!-- 給table表格賦值 -->
?
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in tableData" :key="i">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
?
<script>
export default {
data() {
return {
value: '',
tableData: [
{ name: '張三', age: '18' },
{ name: '張四', age: '17' },
{ name: '張五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
//表格B用原表格的數(shù)據(jù)
tableDataB: [
{ name: '張三', age: '18' },
{ name: '張四', age: '17' },
{ name: '張五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' },
],
};
},
methods: {
// 點(diǎn)擊搜索 支持模糊查詢
search() {
//表格用原表格的數(shù)據(jù) 即 用于搜索的總數(shù)據(jù)
this.tableData = this.tableDataB;
//獲取到查詢的值，并使用toLowerCase():把字符串轉(zhuǎn)換成小寫(xiě)，讓模糊查詢更加清晰
let _search = this.value.toLowerCase();
let newListData = []; // 用于存放搜索出來(lái)數(shù)據(jù)的新數(shù)組
if (_search) {
//filter 過(guò)濾數(shù)組
this.tableData.filter((item) => {
// newListData中 沒(méi)有查詢的內(nèi)容，就添加到newListData中
if (
item.name.toLowerCase().indexOf(_search) !== -1 ||
item.age.toLowerCase().indexOf(_search) !== -1
) {
newListData.push(item);
}
});
}
//查詢后的表格 賦值過(guò)濾后的數(shù)據(jù)
this.tableData = newListData;
},
},
}
</script>
?
<style></style>main.js 代碼如下：
import Vue from 'vue'
import App from './App.vue'
?
Vue.config.productionTip = false
?
new Vue({
render: h => h(App),
}).$mount('#app')整體結(jié)構(gòu)：
演示：
輸入關(guān)鍵字，點(diǎn)擊查詢：
大小寫(xiě)模糊查詢：
到此這篇關(guān)于vue實(shí)現(xiàn)input輸入模糊查詢的三種方式的文章就介紹到這了,更多相關(guān)vue input輸入模糊查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中遇到scrollIntoView無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue中遇到scrollIntoView無(wú)效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過(guò)實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
Vue中獲取this.$refs為undefined的問(wèn)題
這篇文章主要介紹了Vue中獲取this.$refs為undefined的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3響應(yīng)式高階用法之markRaw()的使用
在Vue3中,markRaw()用于防止對(duì)象被轉(zhuǎn)換為響應(yīng)式,適用于管理大型庫(kù)對(duì)象或靜態(tài)數(shù)據(jù),有助于優(yōu)化性能和防止不必要的修改,本文就來(lái)詳細(xì)的介紹一下,感興趣的可以了解一下2024-09-09
利用Vue3 (一）創(chuàng)建Vue CLI 項(xiàng)目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目，下面文章內(nèi)容附有官方文檔鏈接，安裝過(guò)程，需要的可以參考一下2021-10-10
通過(guò)Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來(lái)和大家分享10個(gè)常用的Vue3組合式API,希望對(duì)大家有所幫助2024-01-01
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法
這篇文章主要給大家介紹了關(guān)于利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-i18n具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
大文件下載,花費(fèi)的時(shí)間比較長(zhǎng),沒(méi)有任何提示,用戶體驗(yàn)很差,需要優(yōu)化,提示文件在下載中,并且顯示進(jìn)度百分比,下面小編給大家?guī)?lái)了Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,感興趣的朋友一起看看吧2024-03-03