ユーザー名が使用可能かどうかを確認する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 でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
推薦する
Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明
サーバーも 2 つあります。準備：コンテナのホスト名を設定する consul: kv タイプのストレ...
IISMonitor を使用して Web ページを監視し、IIS を自動的に再起動します。
目次1. ツールの紹介2. ワークフロー3. 操作インターフェースとパラメータ設定（１）監視と再起動...
JavaScript イベント委任 (プロキシ) の使用例の詳細
目次導入例: イベントの委任記述方法1: イベント委譲書き方2: 各子要素がイベントをバインドする例...
vue 動的コンポーネント
目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....
Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...
モバイルページで縦画面を強制する方法
最近、仕事でモバイルページを作成しました。もともと特別なことではありませんでしたが、非常に奇妙に感じ...
Reactのコンポーネント共同利用実装
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...
CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)
1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...
IE6 の歪み問題
質問： <form...> の下の <input type="hidde...
デザイン理論：テキスト表現とユーザビリティ
<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...
Squid を使用して http および https 用のプロキシ サーバーを構築する方法
nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...
Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル
Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...
フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明
目次序文iframeはサンドボックスを実装しますdiffメソッドを使用したサンドボックスの実装プロキ...
JSONデータをHTMLで表示する方法
背景：場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...
ウェブページ上でデスクトップ exe プログラムを呼び出す簡単な方法
この記事では主に、Web ページ上でデスクトップ exe プログラムを呼び出す方法を紹介します。 W...