vue开发遇到的问题

2019-08-28

1.邮箱提示问题

/*邮箱提示:比如input输入123:提示123@163.com,123@126.com,123@yeah.net,123@vip.163.com,123@vip.126.com,123@188.com,
                    输入123@时提示还是这:123@163.com,123@126.com,123@yeah.net,123@vip.163.com,123@vip.126.com,123@188.com
                    输入123@1时提示123@163.com,123@126.com,
                    输入123@16时提示123@163.com,
                    输入123@@时不提示,也就是输入两个@时不提示,
                    我用vue写的分两大步,一利用v-model,获取的内容,与邮箱后缀组成的数组遍历的内容链接成新的字符串,在页面上显示,
                    第二步是根据新组成的字符串字符串进行过滤.
                    怎么过滤不会了,
                    我想用正则,正则不知道怎么写,
                    还没有想到第二种方法,
                    你帮我看看怎么写还有其他方法吗*/

	
 		var selectedArr=[]//提示要显示的信息
 		var selected=[
	{eSuffix:'@163.com'},
	{eSuffix:'@126.com'},
	{eSuffix:'@yeah.net'},
	{eSuffix:'@vip.163.com'},
	{eSuffix:'@vip.126.com'},
	{eSuffix:'@188.com'},
]//邮箱后缀
 		
 		var eValue =this.login.el.eValue;//input输入获取的内容
 		var  flag = '';
 		
      if(eValue.indexOf("@")>0){
          flag=eValue.substring(eValue.indexOf("@")-1);//获取的输入的@开始的内容
          
          eValue=eValue.substring(0,eValue.indexOf("@"));
         
      }else{
          flag="";
          
          //首字符是@
          if(eValue.substring(0,1) == '@'){
          	eValue=eValue.substring(0,eValue.indexOf("@"));
          }
      }
       var val="";
      //将输入内容和后缀链接
     
 		for(var i=0;i<selected.length;i++){
 			val=selected[i].eSuffix;
          val=val.substring(val.indexOf("@"));
          
 			var eSuffix = {eSuffix:eValue+val}
 		
 			selectedArr.push(eSuffix)
 			
 		}
 		
 		var eArr = []//检查满足条件的内容
 		if(flag!=""){
         var reg=new RegExp(flag,"i");
         	
          for(var i=0;i<selectedArr.length;i++){
          	
              if(reg.test(selectedArr[i].eSuffix)){
              	
              	eArr.push(selectedArr[i])
              	
              	this.login.el.selTips = false;
                  
              }else{
              	 selectedArr.splice(i, 1);
                  this.login.el.selTips = true;
                 
              }
          }
          selectedArr = eArr
      }
 		
 		this.$set(this.login.el,'selected',selectedArr)
 		if(this.login.el.eValue == ''){
 			this.login.el.selTips = true;
 		}else{
 			this.login.el.selTips = false;
 		}

2.vue-swiper loop循环问题

this.$http({
        	method:'get',
        	url:'http://192.168.1.74:3000/banner',
        }).then(function(resp){                            
	        console.log(resp.data);
	        that.banners = resp.data.banners
	        
	        that.$nextTick(()=>{
	        	that.mySwiper.slideTo(0, 1000, false)
	        })
	        }).catch(resp => {
	        console.log('请求失败：'+resp.data+','+resp.statusText);
        });
        添加this.$nextTick(()=>{
        	//轮播初始化
        	that.mySwiper.slideTo(0, 1000, false)
        })
    html代码片段
    <div class="n-ban d-flag" id="index-banner">
		<div class="wrap wr" v-if="banners.length>0">
			 <div v-swiper:mySwiper="swiperOption" >
			    <div class="swiper-wrapper"  >
			      <div class="swiper-slide" v-for="banner in banners">
			        <router-link v-for = "item in bannersType"  :to="{path:item.path,query:{id:banner.encodeId}}"  v-if="item.targetType == banner.targetType && item.targetType != 3000">
			        	<img :src="banner.imageUrl">
			        </router-link>
			         <router-link   :to="banner.url"  v-else-if="item.targetType == 3000&&item.targetType == banner.targetType" >
			        	<img :src="banner.imageUrl">
			        </router-link>
			      </div>
			    </div>
   				
			    <div class="swiper-pagination"></div>
			 </div>
			 <a href="javascript:void(0);" class="swiper-button-prev"><</a>
   			 <a href="javascript:void(0);" class="swiper-button-next">></a>
		</div>
	</div>
	在轮播的父级元素添加 v-if="banners.length>0"