Vue实现简单的搜索功能

Vue实现简单的搜索功能

思路：

//先创建一个新的数组，吧tab里的数据赋值给list，
//用list里的数据进行过滤，判断是否有input里的值

HTML

 <div id="app">
        <input type="text" v-model="input" @keyup.enter="btn()">
        <ul>
            <li v-for="(item,index) in tab">{{item.name}}</li>
        </ul>
    </div>

js

let vm=new Vue({
        el:"#app",
        data:{
            input:'',
             tab:[
                {id:1,name:'js'},
                {id:2,name:'css'},
                {id:3,name:'php'},
                {id:4,name:'react'},
            ],
            list:[]
        },
        created () {
            this.list=this.tab
        },
        methods: {
            btn(){
                this.tab=this.list.filter(item=>{
					return item.name.includes(this.input)
				})
            }
        }
    })