Vue简单搜索

  <div id="box">
        <input type="text" v-model="show" >
<transition-group name="fade" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
    <p v-show="show" v-for="(val,index) in fruits" :key="index">{{val}}</p>

        </transition-group>
    </div>

    <script>
        new Vue({
            el:"#box",
            data:function(){
                return{
                    show:"",
                    fruit:["banana","apple","orange","pear","watermalen"]
                }
            },computed:{
                fruits:function(){
                    var arr=[];
                        this.fruit.forEach(function(val){
                        if(val.indexOf(this.show)!=-1){
                            arr.push(val);
                        }
                        }.bind(this));
                    return arr;
                    }
                }

        })
    </script>