VUE 中的搜索关键字

1、定义一个搜索框

<label>
	搜索关键字：
	<input type="search" name="" id="" value="" v-model="keywords"/>
</label>

2、循环遍历，之前，v-for 中的数据，都是直接从 data 上的list中直接渲染过来的，现在，我们自定义了一个 search 方法，同时，把所有的关键字，通过传参的形式，传递给了 search 方法，在 search 方法内部，通过 执行 for 循环，把所有符合 搜索关键字的数据，保存到一个新数组中，返回

<tr v-for="item in search(keywords)" :key="item.id">
	<td>{{ item.id }}</td>
	<td v-text="item.name"></td>
	<td>{{ item.ctime }}</td>
</tr>

3、在data中，我们写入如下数据

data:{
	id:'',
	name:'',
	keywords:'',
	list:[
		{id:1,name:'李白',ctime:new Date()},
		{id:2,name:'关羽',ctime:new Date()},
		{id:3,name:'韩信',ctime:new Date()},
		{id:4,name:'花木兰',ctime:new Date()},
		{id:5,name:'貂蝉',ctime:new Date()},
		{id:6,name:'露露',ctime:new Date()},
		{id:6,name:'大乔',ctime:new Date()},
		{id:6,name:'荆轲',ctime:new Date()},
		{id:6,name:'项羽',ctime:new Date()},
		{id:6,name:'典韦',ctime:new Date()},
		{id:7,name:'小乔',ctime:new Date()}
	]
},

4、在methods中，我们根据关键字,进行数据的搜索

methods:{
		search(keywords) {//根据关键字,进行数据的搜索
				var newList = []
					this.list.forEach(item => {
				if(item.name.indexOf(keywords) != -1){
							newList.push(item)
					}
				})
				return newList
			}
	}

5、我们还可以这样写，注意: forEach some filter findIndex 这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作;注意: ES6 中,为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串'),如果包含,则返回 true ,否则返回 false
methods:{

methods:{
	search(keywords) {//根据关键字,进行数据的搜索
				//注意: forEach	some	filter	findIndex	这些都属于数组的新方法,
				//都会对数组中的每一项,进行遍历,执行相关的操作;
				return this.list.filter(item=>{
					//if(item.name.indexOf(keywords) != -1)
					
					//注意: ES6 中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
					//如果包含,则返回 true ,否则返回 false
					//contains  
					if(item.name.includes(keywords)){
						return item
					}
				})		
				}
			}