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リッチテキストエディタを使用し、画像をサーバーにアップロードします。

推薦する

HTML ページジャンプとパラメータ転送の問題

HTMLページジャンプ: window.open(url, "", "...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

トップナビゲーションバー機能を実現するCSS+HTML

ナビゲーション バー、固定トップ ナビゲーション バー、およびセカンダリ メニューの実装効果図の実装...

HTMLファイルとは何ですか?HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

HTMLタグのフルネームと機能の紹介

アルファベット順DTD: このタグが許可される XHTML 1.0 DTD を示します。 S=厳密、...

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...

MySQL でストアド プロシージャを作成し、ループでレコードを追加する方法

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、ループでレコードを追加する...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

JavaScript で Webpack を使用するチュートリアル

目次0. Webpackとは1. Webpackの使用2. Webpackのコアコンセプト2.1 エ...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

Windows での mysql-5.7.28 のダウンロード、インストール、および構成に関する詳細なグラフィックとテキストのチュートリアル

最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...