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>名前: {{ card_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 をよろしくお願いいたします。

以下もご興味があるかもしれません: