vue三种模糊查询方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue三种模糊查询方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前两种模糊查询根据输入的值直接查询（效果如图）

vue模糊查询,前端,vue

最后一种模糊查询通过点击按钮查询（视情况定）

vue模糊查询,前端,vue

模糊查询方式一(计算属性)

<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>

模糊查询方式二(监听属性)

<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:{
				//立即监听 
				immediate:true,
				//监听输入值发生改变时把过滤的数据赋值给新数组
				handler(val){
					this.filterList =  this.list.filter(item=>{
						return item.name.indexOf(this.keyWord) !==-1 || item.age.indexOf(this.keyWord) !== -1
					})
				}
			}
		}
	}
</script>

<style>
</style>

模糊查询方式三(点击按钮搜索查询)文章来源地址https://www.toymoban.com/news/detail-517698.html

<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():把字符串转换成小写，让模糊查询更加清晰
		      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;
		    },
		  }
	}

到了这里，关于vue三种模糊查询方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！