ユーザー名が使用可能かどうかを確認する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 でリモートの安全なアクセスを有効にする方法の詳細なグラフィック チュートリアル
推薦する
XHTML 入門チュートリアル: フレーム タグの使用
<br />フレーム構造により、ブラウザの 1 ページに複数の Web ページを同時に表...
企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は
名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...
HTTP ステータス コード
このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...
Ubuntu で起動時に自動的に起動するシェル スクリプトを作成する (推奨)
スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです（怠惰のためでも...
インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介
バイオニックデザインといえば、飛行機の発明、ドバイのブルジュ・アル・アラブ、平泳ぎなどを思い浮かべる...
Linux の文字端末でマウスを使って赤い四角形を移動する方法
すべてがファイルです！ UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...
MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点
注意事項1. まず、mysql インストール ディレクトリに次の内容の my.ini ファイルを作成...
Ubuntu 20.04 LTSの詳細なインストール履歴
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
Linux における $ 記号の基本的な使い方のまとめ
Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...
Mysql5.7 で中国語の文字化けの問題を解決する
MySQL 5.7 を使用すると、Web ターミナル経由でデータベースに中国語の文字を書き込むと文字...
Linux の MariaDB データベースについて
目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...
Linux インストール MySQL5.6.24 使用手順
Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...
CSSは5つの一般的な2D変換を実装します
CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形などの基本的な変換操作を 2 次元空間...
MySQL 派生テーブル（Derived Table）の簡単な使用例分析
この記事では、例を使用して、MySQL 派生テーブルの簡単な使用方法を説明します。ご参考までに、詳細...
WeChatアプレットのスクロールビューが左右の連動を実現
この記事では、WeChatアプレットのスクロールビューの左右連動を実現するための具体的なコードを参考...