この記事では、ユーザー名が使用可能かどうかを確認するための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 でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
目次1. 切り捨て操作1.1 MySQL truncate はどのような操作を実行しますか? 1.2...
ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...
目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...
1. 設定ファイルをユーザー環境にコピーし、新しい.vimフォルダを作成し、バンドルサブフォルダを作...
目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...
目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...
私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...
以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...
1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
例えば、入力ボックスがあります <el-入力 ref="mySearch"...
この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...
VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...