Vue の 3 つのファジー クエリ メソッド

 最初の 2 つのファジー クエリは、入力値に従って直接クエリされます (効果は図に示されています)。

       

         

  最後の種類のあいまいクエリは、ボタンをクリックすることでクエリされます (状況に応じて)。

        

      

あいまいクエリ方法 1 (計算された属性)

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

あいまい問い合わせ方式2（属性監視）

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

ファジークエリ方法 3 (ボタンをクリックして検索およびクエリを実行)

<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;
		    },
		  }
	}