ユーザー名が使用可能かどうかを確認するVueメソッド
|
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。 入力ボックスに名前を入力する際、フォーカスを失ったときにその名前が存在するかどうかを確認します。すでに存在する場合は、再入力するように求めます。存在しない場合は、使用できることを要求します。 コードは次のとおりです
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>リスナーの例</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<本文>
<div id="アプリ">
<input type="text" v-model.lazy="msg"> <span> {{ span1 }}</span>
</div>
<スクリプト>
// リスナーは現在のデータの変更を監視します。テキストボックスのデータがフォーカスを失うと、
// テキストボックスの値をバックエンドに渡して操作し、バックエンドから返されたデータに基づいて判断し、プロンプトを表示します var vm = new Vue({
el: "#app",
データ： {
メッセージ: "",
スパン1: "",
},
メソッド: {
show1: function (val) †//ここでのvalはテキストボックスの値です//非同期リクエストを実行し、バックグラウンドに移動してデータを取得し、バックグラウンドに移動してデータを取得することをシミュレートします var that = this; //setTimeoutにもthisオブジェクトがあるため、このオブジェクトはドキュメントオブジェクトです setTimeout(function () { //ここでvalを書くとifに入らない if (val === "aaa") {
that.span1 = "ユーザー名は使用できません。変更してください";
} それ以外 {
that.span1 = "ユーザー名は使用できます";
}
}, 2000);
}
},
時計：
メッセージ: 関数 (val) {
this.show1(val);
this.span1 = "検証中";
},
}
})
</スクリプト>
</本文>
</html>効果は以下のとおりです
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
推薦する
複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません
最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...
Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...
MySQLバックアップとリカバリの実践に関する詳細な説明
1. mysqlbackup の紹介mysqlbackup は、MySQL Enterprise B...
Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明
目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...
VMware 仮想マシンに Android x86 をインストールする方法
アプリをテストしたいが、それを携帯電話で実行したくない場合があります。この場合、仮想マシンを使用して...
CentOS7 で jar アプリケーションの起動を設定する方法
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
Dockerでのpython3.8イメージのインストールについて
Docker Hub公式サイト1. Pythonミラーを検索するdocker 検索 python 2...
一般的なDockerコマンドの詳細な説明
1. ヘルプコマンド1. 現在のDockerバージョンを表示する docker バージョン2. イメ...
データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介
データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインラ...
vscode で Prettier Code プラグインを使用する詳細なチュートリアル
なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...
Linux プロセスが占有するポート番号を表示する 6 つの方法
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...
静的リソースファイルのアクセスログをフィルタリングするNginxの実装
乱雑なログ日常的に使用される Nginx は、静的リソース サーバーとリバース プロキシ サーバーの...
Linux netfilter/iptables の知識ポイントの詳細な説明
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
Docker ログが多すぎてディスクがいっぱいになる場合の対処方法
複数の Docker コンテナがデプロイされたサーバーがあり、各 Docker コンテナが stde...
MySQL では UTF-8 が推奨されないのはなぜですか?
最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...