学习小收获笔记

1、vue中的watch监听数据的变化。

使用案例：监听手机号码，并且限制输入类型

<templete>
　　<div>
　　　　<input type="text" class="login-input float-lt" v-model="account"  placeholder="请输入手机号">

　　</div>
</templete>

watch:{
  account(val){
    let _this = this;
    //监听登录的手机账号
    if(this.account && this.account.length>11){
      this.account = this.account.substring(0,11);
    }
    if(!(/^[0-9]*$/.test(this.account))){
      let arr = this.account.split("");
      var reg=/^[A-Za-z\u4E00-\u9FA5!！@#*&_\-/),./(，/（/）。/|\\]*$/;
      arr.forEach((item,index)=>{
        if(reg.test(item)){
          _this.$set(_this,"account",_this.account.substring(0,index));
        }
      });
    }
    if(!(/^1[3|4|5|7|8|9][0-9]{9}$/.test(this.account))){
      this.errorP = true;
    }else{
      this.errorP = false;
      this.post.userAccount = _this.account;
    }
    this.post.userAccount = this.account
  },
}

2、vue的filter过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记

　

//利用filter截取字符串超过的使用。。。需要注意的是，这必须使用return,否则值就是空的
<template>
  <div class="hello">
    <p>filter{{info|filter1(10)}}</p>
  </div>
</template>

filters:{
  filter1:function(value,length){
    let resault = value;
    if(resault && resault.length>length){
      resault = resault.substring(0,length);
      resault = resault+'...';
    }
    return resault;
  }
}