vue input输入框模糊查询

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

<template> 
<div> 
<input type="text" placeholder="请输入..." v-model="searchVal"> 
	<ul> 
		<li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name">
		</li> 
	</ul> 
</div> 
</template>

<script> 
export default 
{ 
	name: "HelloWorld", 
	data() 
	{ 
	return { 
		searchVal: "", 
		items: [ 
		{name: "上海", value: "shanghai" },
		{name: "北京", value: "beijing" },
		{name: "重庆", value: "chongqing" },
		{name: "哈哈哈", value: "hahaha" },
		{name: "哈哈好好", value: "haohao" },
		{name: "海上钢琴师", value: "hsfewfew" },
		{name: "上海上海上海", value: "shshshsh" }
		]}; 
	},
	methods: {}, 
	computed: {
	 NewItems() 
	{ 
		var _this = this; var NewItems = []; 
		this.items.map(function(item) 
		{ 
		if (item.name.search(_this.searchVal) != -1) 
		{ 
			NewItems.push(item); }}); 
		return NewItems; }
	}	
};
	</script>

如果是大一点的数据推荐使用插件Fuse.js