Vueはユーザー名が使用可能かどうかの検証を実装します

<div id="アプリ">
  <span>ユーザー名:</span>
  <span>
   <input type="text" v-model.lazy="uname">
  </span>
  <span>
   {{ヒント}}
  </span>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* リスナーはリスナーを使用してユーザー名の変更を監視します。ユーザー名が変更された場合（検証のためにバックグラウンドインターフェースを呼び出します）
  検証結果に応じてプロンプト情報を調整する*/
  var vm = 新しい Vue({
   el: "#app",
   データ： {
    名前: ''、
    ヒント： ''
   },
   メソッド: {
    checkName: 関数 (uname) {
     // インターフェイスを呼び出しますが、スケジュールされたタスクを使用してインターフェイス呼び出しをシミュレートできます。var that = this;
     setTimeout(関数() {
      // インターフェース呼び出しをシミュレートする if (uname == 'admin') {
       that.tip = 'ユーザー名は既に存在します。変更してください'
      } それ以外 {
       that.tip = 'ユーザー名は使用できます'
      }
     }, 1000)
    }
   },
   時計：
    uname: 関数 (val) {
     //バックエンド インターフェイスを呼び出して、ユーザー名の正当性を確認します。this.checkName(val);
     this.tip = '確認中...'
    }
   },

  });
</スクリプト>