ユーザー名が使用可能かどうかを確認する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 でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
推薦する
Linuxダイナミックリンクライブラリの使用
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
ボタンの権限判定を実装するためのVueカスタムv-has命令
アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...
MySQLで大きなテーブルをエレガントに削除する方法について簡単に説明します
目次1. 切り捨て操作1.1 MySQL truncate はどのような操作を実行しますか? 1.2...
CSS ワールド - コード実践: 画像の Alt 情報の表示
ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...
Angularデータバインディングとその実装の詳細な説明
目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...
Ubuntu で VIM を C++ 開発エディタとして設定する
1. 設定ファイルをユーザー環境にコピーし、新しい.vimフォルダを作成し、バンドルサブフォルダを作...
vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...
IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明
目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...
純粋な CSS で中空効果を実現するためのサンプルコード
私は最近、空洞化効果について研究しました。背景クリップ: テキスト背景はテキストの前景色にクリップさ...
Linux での MySQL 5.1 および 5.7 のインストール チュートリアル
以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...
MySQL 5.7 以降のバージョンのダウンロードとインストールのグラフィック チュートリアル
1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...
純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
ElementUIカスタムCSSスタイルが有効にならない問題を解決する
例えば、入力ボックスがあります <el-入力 ref="mySearch"...
ドロップダウンリストのJavaScript実装
この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...
MySQL マスタースレーブスイッチチャネルの問題の解決策
VIP を設定した後、アクティブ/スタンバイの切り替え中に表示されるエラー メッセージは次のとおりで...