ユーザー名が使用可能であることを確認します
ケース効果
実装手順(アイデア)
- vモデルを介したデータバインディング
- 迅速な情報を提供する必要がある
- 入力情報の変化を監視するリスナーが必要
- トリガーされたイベントを変更する必要があります
さらなる調整は
- リスナーを使用してユーザー名の変更を監視する
- ユーザー名が変更された場合(確認のためにバックグラウンドインターフェイスを呼び出します)
- 検証結果に応じてプロンプト情報を調整します
コード
基本レイアウト
<div id="app">
<span>用户名:</span>
<span>
<input type="text" v-model.lazy="uname">
</span>
<span>
{
{tip}}
</span>
</div>
リスナーを通じて特定の機能を実現
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 侦听器
采用侦听器监听用户名的变化
如果用户名发生变化(调用后台接口进行验证)
根据验证的结果调整提示信息 */
var vm = new Vue({
el: "#app",
data: {
uname: '',
tip: ''
},
methods: {
checkName: function (uname) {
// 调用接口,但是可以使用定时任务的方式模拟接口调用
var that = this;
setTimeout(function () {
// 模拟接口调用
if (uname == 'admin') {
that.tip = '用户名已经存在,请更换一个'
} else {
that.tip = '用户名可以使用'
}
}, 1000)
}
},
watch: {
uname: function (val) {
// 调用后台接口验证用户名的合法性
this.checkName(val);
this.tip = '正在验证...'
}
},
});
</script>
セルフモチベーション
人々は絶え間ない励ましを必要とします、絶え間ない励ましだけが最大限に自分自身を示すことができます。励ましは、逆境の中で人々が前進する原動力であり、励まし続ける限り、不屈の進歩の状態を維持することができます。