ユーザー名が使用可能かどうかを確認する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 でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
推薦する
React で setInterval 関数を使用する例
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
Win10 に Linux ubuntu-18.04 デュアル システムをインストールする (インストール ガイド)
コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...
Raspberry PiにDockerをインストールする方法
Raspberry Pi は ARM アーキテクチャをベースとしているため、Docker のインスト...
Kubernetesでポッドを作成する方法
目次ポッドを作成するには？ kubectl ツールポッドを作成するには？前回の記事では、コンテナとポ...
Linux環境でのDockerインストールチュートリアル
1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...
Vue.js ディレクティブのカスタム命令の詳細な説明
デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...
MySQLで関連テーブルを削除する実用的な方法
MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...
React+Antdはテーブルの追加、削除、変更の例を実装します
目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...
vue-video-player でのブレークポイント再開の実装
最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...
Vueはカードフリップ効果を実現します
この記事では、カードフリップ効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...
tomcat をインストールし、Linux で Web サイトを展開します (推奨)
jdk をインストールします: Oracle 公式ダウンロード https://www.oracl...
Typescriptを使用してローカルストレージをカプセル化する方法
目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...
HTML の基礎_一般的なタグ、共通タグ、表
パート 1 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...
CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。
1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...
ウェブサイトのデザイン体験のための7つの異なるカラースキーム
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...