Vue简单搜索
首页 > Vue    作者:lininn   2017年7月27日 10:05 星期四   热度:2337°   百度已收录  
时间:2017-7-27 10:05   热度:2337° 
	<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>
二维码加载中...
本文作者:lininn      文章标题: Vue简单搜索
本文地址:?post=11
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn