【vue】前端实现输入进行搜索

<template>

<div class="hello">

<input type="text" v-model="searchName"></input>

<ul> <li v-for="(p,index) in filterPersons" :key="index">

{{index}}---{{p.name}}---{{p.age}} </li> </ul> </div>

</template>

<script>

export default

{

name: 'HelloWorld',

data(){

return {

searchName:"",

persons:[ {name:"zhangsan",age:9}, {name:"lisi",age:12}, {name:"wangwu",age:39}, {name:"zhaoliu",age:19} ] } },

computed:{

filterPersons(){

let {searchName,persons}=this;

let newPersons=persons.filter(p=>p.name.indexOf(searchName)>=0) return newPersons; }

}

</script>