# 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)
				})
            }
        }
    })

常用