1. ElementUIで基本的なスタイルを構築するElementUI を知らない場合は、公式 Web サイト https://element.eleme.cn/#/zh-CN にアクセスして、ElementUI の基本を理解してください。 1.1 ElementUIの使用 まず、npm i element-ui Sコマンドを使用してプロジェクトにElementUIをインストールします。 1.2 次に、公式ウェブサイトからフォームを見つけて、基本的なレイアウトを行うことができます。 これが私が書いたフレームワークです <el-フォーム ラベル位置="上" ラベル幅="100px" クラス="demo-ruleForm" :rules='ルール' :model='ルールフォーム' ステータスアイコン ref='ルールフォーム' > <el-form-item label="ユーザー名" prop="名前"> <el-input type="text" v-model="rulesForm.name"></el-input> </el-form-item> <el-form-item label="パスワード" prop="パスワード"> <el-input type="password" v-model="rulesForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">送信</el-button> <el-button>リセット</el-button> </el-form-item> </el-form> これらのコードの効果 ここでは ElementUI のプロパティがいくつか使用されているため、ここでは説明しません。それらはすべて公式 Web サイトにあります。そのため、これらのプロパティを確認できるようにスクリーンショットをいくつか掲載します。 次に、ルールとモデルを組み合わせて、ルールを入力するための入力ボックスを作成します。 次に、これらの2つのルールをアカウントとパスワードボックスにバインドします ElementUIレイアウトは数回クリックするだけです 2. [送信]ボタンをクリックして、アカウントとパスワードボックスの内容をバックグラウンドデータに渡します。refを通じてタグ内の属性をより良く取得することができます 以下は入力ボックスの内容をバックグラウンドに渡す方法です メソッド: { 送信フォーム(送信者名){ this.$refs[fromName].validate((valid)=>{ if(有効){ //チェックに合格したら、ユーザー名とパスワードをバックエンドに送信します login({ 名前:this.rulesForm.name、 パスワード:this.rulesForm.password }).then((データ)=>{ if(データコード==0){ localStorage.setItem('トークン',data.data.token) ウィンドウの場所.href='/' } if(データコード==1){ this.$message.error(データ.メッセージ) } }) }それ以外{ console.log('送信エラー!!') 偽を返す } }) } } その1つはログインであり、バックエンドのインターフェースをカプセル化することで得られるメソッドである。 このメソッドは送信ボタンにバインドされています 次に、既存のアカウントのパスワードを入力し、送信ボタンをクリックしてログインします。 次にログイン情報をレンダリングします 要約するログイン効果を実現するには2つのステップがあります。まずElementUIを使用して対応するスタイルを構築します---「送信ボタンをクリックして、アカウントとパスワードボックスの内容をバックグラウンドデータに渡します これで、vue ElementUI のフォームからのログイン効果を実現する例に関するこの記事は終了です。より関連性の高い vue Element のフォームからのログイン コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows で負荷分散に Nginx+Tomcat を使用するための完全な手順
nginx バージョン 1.11.3次の構成を使用すると、検証は無効になり、クロスドメインの問題が依...
この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...
目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...
序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...
この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...
高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...
1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...
1.dockerをオンラインでダウンロードする yum インストール -y epel-release...
目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...
序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...
目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...
解凍したフォルダ C:\web\mysql-8.0.11 を開き、フォルダ内に my.ini 構成フ...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...