快捷導(dǎo)航

vue三種模糊查詢方式代碼實例

更新時間：2023年06月29日 14:35:39 作者：我心向陽.

這篇文章主要給大家介紹了關(guān)于vue三種模糊查詢方式的相關(guān)資料,在vue中模糊搜索主要是用computed屬性實現(xiàn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前兩種模糊查詢根據(jù)輸入的值直接查詢（效果如圖）

最后一種模糊查詢通過點擊按鈕查詢（視情況定）

模糊查詢方式一(計算屬性)

<template>
	<div>
		<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="請輸入查找">
		<table>
			<tbody>
				<tr v-for="(item,index) in filterList" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				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:{
			filterList(){
				return this.list.filter(item=>{
					return item.name.indexOf(this.keyWord)!==-1 || item.age.indexOf(this.keyWord)!==-1
				})
			}
		}
	}
</script>
<style>
</style>

模糊查詢方式二(監(jiān)聽屬性)

<template>
	<div>
		<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="請輸入查找">
		<table>
			<tbody>
				<tr v-for="(item,index) in filterList" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				keyWord: '',
				filterList:[],
				 list:[
				        { name: '張三', age: '18' },
				        { name: '張四', age: '17' },
				        { name: '張五', age: '17' },
				        { name: '老六', age: '18' },
				        { name: '老八', age: '18' },
				        { name: '小三', age: '19' },
				        { name: 'Xingyue', age: '18' }
				          ],
			}
		},
		watch:{
			keyWord:{
				//立即監(jiān)聽 
				immediate:true,
				//監(jiān)聽輸入值發(fā)生改變時把過濾的數(shù)據(jù)賦值給新數(shù)組
				handler(val){
					this.filterList =  this.list.filter(item=>{
						return item.name.indexOf(this.keyWord) !==-1 || item.age.indexOf(this.keyWord) !== -1
					})
				}
			}
		}
	}
</script>
<style>
</style>

模糊查詢方式三(點擊按鈕搜索查詢)

<template>
	<div>
		<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="請輸入查找">
		<table>
			<tbody>
				<tr v-for="(item,index) in list" :key="index">
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
				</tr>
			</tbody>
		</table>
		<button @click="search" style="width: 200rpx;background-color: #3CA0F6;">查詢</button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				keyWord: '',
				 list:[
				        { name: '張三', age: '18' },
				        { name: '張四', age: '17' },
				        { name: '張五', age: '17' },
				        { name: '老六', age: '18' },
				        { name: '老八', age: '18' },
				        { name: '小三', age: '19' },
				        { name: 'Xingyue', age: '18' }
				          ],
			}
		},
		methods: {
		    search() {
		      //獲取輸入的值，并使用toLowerCase():把字符串轉(zhuǎn)換成小寫，讓模糊查詢更加清晰
		      let _keyWord = this.keyWord.toLowerCase();
		      let newList = [];
		      if (_keyWord) {
		        this.list.filter(item => {
		          if (
		            item.name.toLowerCase().indexOf(_keyWord) !== -1 ||
		            item.age.toLowerCase().indexOf(_keyWord) !== -1
		          ) {
		            newList.push(item);
		          }
		        });
		      }
		      this.list = newList;
		    },
		  }
	}

總結(jié)

到此這篇關(guān)于vue三種模糊查詢方式的文章就介紹到這了,更多相關(guān)vue模糊查詢方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: