侦听器、过滤器

8.侦听器、过滤器

1.侦听器 watch

val是参数，即输入的内容

<input type="text" v-model="firstName">
<input type="text" v-model="lastName">

data: {
  firstName: 'Jim',watch
  lastName: 'Green',
  fullName: 'Jim Grenn'
},
watch: {
   firstName: function(val){
     this.fullName=val+' '+ this.lastName
   },
   lastName: function(val){
     this.fullName=firstName+' '+ val
   }
}

步骤

1.采用侦听器监听用户名变化

2.调用后台接口进行验证

3.根据验证的结果调整提示信息

<input type="text" v-model.lazy='uname'>
<span>{{tip}}</span>

data:{
  uname: '',
  tip: ''
}

methods: {
  checkName: function(uname){
  // 调用接口，可以使用定时任务方式模拟接口调用
  //缓存一下this
    var that=this
    setTimeout(function(){
       // 模拟接口调用
       if(uname=='admin') {
         //setTimeout 中的this是window,和tip的this不一样
         that.tip='用户名已经存在，请更换'
       } else {
         that.tip='用户名可以使用'
       }
    }，2000)
  }
}

watch:{
  uname: function(val){
    this.checkName(val)
    // 修改提示信息
    this.tip='正在验证'
  }
}