vue关键字筛选过滤

先写个输入框,和要展示的内容,


	
			{{item.name}}
	

这里的数组newarry是筛选之后呈现的数组

patharry:[{
					id:'001',name:'张三',age:'18'
				},{
					id:'002',name:'李三',age:'19'
				},{
					id:'003',name:'李四',age:'20'
				},{
					id:'004',name:'王四',age:'21'
				}],

data里的数组是存着循环数据的数组。

计算属性里写:

	computed:{ 
			newarry(){
				return this.patharry.filter((item)=>{
					return item.name.indexOf(this.chooseaaa) !==-1 
				})
			},
		},

或者不用计算属性写,写在watch监听里:

watch:{
     chooseaaa:{
		immediate:true,
		handler(val){
		this.newarry = this.patharry.filter((item)=>{
				return item.name.indexOf(val) !==-1
			})
			}
			}
  }

indexof方法:可返回某个指定的字符串值在字符串中首次出现的位置。

要是没有的要检索的字符串值就返回-1

filter,map,reduce高阶函数用法:

filter:

filter中的回调函数有一个要求:必须返回一个boolean值
true:当返回true时,函数内部会自动将这次回调的item遍历为true的值加入到新的数组中
false:当返回false时,函数内部会过滤掉这次的item遍历为false的值

函数会自动将为true的值加入一个数组,我们只需用一个新的数组去接收即可。

你可能感兴趣的:(笔记,vue.js,前端,javascript)