You are viewing a single comment's thread from:

RE: Vue.js实战笔记

in #starnote6 years ago

主要是使用@keyup的动态事件,键盘一输入,就执行检查函数,以得到结果。
动态绑定样式表,将得到的结果切换显示。主要用于注册等操作。

<b-input
id="inline-form-input-name"
:class="checkFlag ? 'isok': 'isfalse'"
placeholder="请输入用户名(3位以上英文 或 英文加数字)"
v-model="username"
@keyup="checkuser"
></b-input>

data() {
  return {
    username:'',
    checkFlag: true,
  }
},

checkuser(){
  let that = this
  const username = this.username
  if(username.length < 3){
    return this.checkFlag=false
  }
  async function main(){
    const ac = await that.client.database.call('lookup_account_names', [[username]])
    // return (ac[0] === null) ? true : false;
    console.log(123, ac[0])
    if(ac[0] !== null){
      console.log("1111, 用户名已存在!")
      that.checkFlag = false
    }else{
      console.log(234567, '开始注册')
      that.checkFlag = true
    }
  }
  main()
},

<style scoped>
  .isok{
    margin-top: 1.5rem;
    width: 50%;
    /*background-color: chartreuse;*/
  }
  .isfalse{
    margin-top: 1.5rem;
    width: 50%;
    background-color: crimson;
  }
</style>

Coin Marketplace

STEEM 0.13
TRX 0.33
JST 0.034
BTC 110941.96
ETH 4291.49
SBD 0.84