Vue 最简单的实现input 输入框的模糊查询（不使用后端接口）

Vue 模糊查询功能

原理：原生js的search() 方法，用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

1. input输入框

<el-input placeholder="请您输入地址" v-model="value"></el-input>
<i class="el-icon-search" @click="searchAdress"></i>

2. 循环的数据

<ul>
   <li v-for="(item,index) in NewItems" :key="index" v-text="item.name"></li>
</ul>

<script>

export default {

	data() {
	
		return {
		
			value: "",
			
			NewItems: [
			
				{ name: "上海" },
				
				{ name: "北京" },
				
				{ name: "重庆" }
				
			]
		
		};

 	},
	methods: {
		searchAdress () {
			var _this = this;
	        var NewItems = [];
	        this.NewItems.map(function (item) {
	          if (item.name.search(_this.value.trim()) != -1) {
	            NewItems.push(item);
	            console.log(NewItems);
	          }
	        });
	        this.NewItems = [];
	        this.NewItems = NewItems;
	        return NewItems;
		}
	},

};

</script>