VUEをベースにしたシンプルな学生情報管理システムの実装

VUEをベースにしたシンプルな学生情報管理システムの実装

1. 主な機能

このタスクは主に VUE を使用してシンプルな学生情報管理システムを実装することであり、主な機能は次のとおりです。

1. 全生徒の情報を表示する(デフォルトは10)
2. ボタンをクリックすると、学生IDが奇数(または偶数)で終わる学生の情報が表示されます。
3. 生徒情報を追加する
4. VUEの親コンポーネントと子コンポーネント間の通信が必要

2. 実装のアイデア

1. データ管理: json配列を使用してデータを管理および保存する
2. 学生情報の表示: コンポーネントは再利用可能な Vue インスタンスであるため、ここで子コンポーネントが導入され (各学生の情報を表示するため)、ホームページが親コンポーネントとして使用されます。ホームページ (親コンポーネント) は、v-forループを使用して子コンポーネントを表示します。
3. 奇数と偶数で生徒を検索します。JSON 配列をループして判断し、条件を満たす情報を新しい JSON 配列に格納します。
4. v-ifを使用して、フィルタリング条件を満たす学生情報をホームページに表示します。

3. コードの実装

1. 親子コンポーネントの定義

親コンポーネント: まず、呼び出されるコンポーネントを定義します

エクスポートデフォルト{
 名前: 'HelloWorld',
 コンポーネント:
 ChildCom//呼び出しコンポーネント},

サブコンポーネント:

エクスポートデフォルト{
 名前: 「子供」
 小道具: [
 'カードアイテム'
 ]、
 データ () {
 戻る {
 }
 }
}

2. コンポーネント間の通信

コンポーネントはPropsを通じてサブコンポーネントにデータを渡す

親コンポーネント: v-for を使用して学生情報配列を走査します
経由: card_item (子コンポーネントが受け入れるデータの名前) = "stu" (親コンポーネントから子コンポーネントに渡されるデータ)

<div v-if="flag_danshu==1">
<Child-com id="1" class="list" v-for="(stu,index1) in new_list_danshu" :key="index1" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_shuangshu==1">
<Child-com id="2" class="list" v-for="(stu,index2) in new_list_shuangshu" :key="index2" :card_item="stu" >
</Child-com>
</div>
 <div v-else-if="flag_all==1">
<Child-com id="3" class="list" v-for="(stu,index3) in stu_list" :key="index3" :card_item="stu">
</Child-com>
</div>

サブコンポーネント:

<div>名前: {{ car​​d_item.name }} </div>
  <div>学生ID: {{card_item.stuId}}</div>
  <div v-if="card_item.gender==1">性別: 男性</div>
  <div v-else>性別: 女性</div>

3. 学生IDの末尾が奇数(または偶数)の学生情報を表示する(奇数を例とする)

 danshu (stu_list) {
  this.new_list_danshu=[];
  stu_list.forEach((項目) => {
   if(item.stuId%2!=0)
   this.new_list_danshu.push(item);//条件が満たされた場合、特異情報を格納するために使用されるjson配列に追加します}
  )
  // アラート(this.new_list[1]);
  this.flag_all=0; //すべて表示 this.flag_danshu=1; //奇数を表示 this.flag_shuangshu=0; //偶数を表示},

4. 生徒情報を追加する

 追加:関数(){
 var name = document.getElementById("stu_name").value;
 var id = document.getElementById("stu_id").value;
 var 性別 = document.getElementById("stu_gender").value;
 if(名前==''||ID==''||性別==''){
  alert('情報を入力してください');
  }
  それ以外{
  var アイテム ={};
  アイテムID
  アイテム名=名前;
  item.gender=性別;
  this.stu_list.push(アイテム);
  alert('正常に追加されました');
  
  }
 }

4. エフェクト表示

ここに画像の説明を挿入

学生IDが奇数で終わる学生情報を表示する

ここに画像の説明を挿入

生徒情報を追加する

ここに画像の説明を挿入

V. 結論

まだ小さなデモですが、完成するまでの過程で、v-show と v-if の違いに注意するなど、多くの問題に遭遇しました。最初は、v-show を使用して、フィルタリング条件に応じて異なる学生情報を表示したいと考えていましたが、学生情報が現在の条件を満たしていなくても、レンダリングされて表示されることがわかりました。助けを求めた後、複数のページを表示する必要があり、これらのページが相互に排他的である場合は、v-if、v-else-if、v-else を使用して表示することを知りました。

v-showとv-ifの違いは次のとおりです。

v-if は、データが true と判断された場合にのみデータをレンダリングし、false の場合に含まれるコードを削除します。データが再度レンダリングされない限り、v-if は再判定されます。使い方としては、データに対して一度だけ操作する傾向があると言えます。
v-show は判定に関係なくまずデータをレンダリングしますが、判定が false の場合、ノードは display:none; になります。したがって、データの値を変更すると、データを再レンダリングせずにデータを表示したり非表示にしたりすることができます。

VUE をベースにしたシンプルな学生情報管理システムの実装に関するこの記事はこれで終わりです。VUE 学生情報管理システムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

VUE をベースにしたシンプルな学生情報管理システムの実装に関するこの記事はこれで終わりです。VUE 学生情報管理システムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+Bootstrapでシンプルな学生管理システムを実現
  • Vueはシンプルな学生情報管理を実装します
  • Vueが学生情報管理システムを実現
  • Vueが学生管理機能を実装

<<:  Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明

>>:  Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

推薦する

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析

mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...

mysql8.x docker リモートアクセスの詳細な設定

目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...

MySql インデックスはクエリ速度を向上させる一般的な方法のコード例

インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...

WeChatアプレット開発の章:落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

GNU Parallelの具体的な使用法

それは何ですか? GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

vscodeで保存した後のHTML自動フォーマットの問題を解決する

vsCode のバージョンは最近更新され、現在のバージョン番号は 1.43 です。実際、vsCode...

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...

React tsx はランダムな検証コードを生成します

React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...