Vue简单搜索
发布于 2017-07-26 14:05:32
2657 次浏览
<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>