1. 主な機能このタスクは主に VUE を使用してシンプルな学生情報管理システムを実装することであり、主な機能は次のとおりです。 1. 全生徒の情報を表示する(デフォルトは10) 2. 実装のアイデア1. データ管理: json配列を使用してデータを管理および保存する 3. コードの実装1. 親子コンポーネントの定義 親コンポーネント: まず、呼び出されるコンポーネントを定義します エクスポートデフォルト{ 名前: 'HelloWorld', コンポーネント: ChildCom//呼び出しコンポーネント}, サブコンポーネント: エクスポートデフォルト{ 名前: 「子供」 小道具: [ 'カードアイテム' ]、 データ () { 戻る { } } } 2. コンポーネント間の通信 コンポーネントはPropsを通じてサブコンポーネントにデータを渡す 親コンポーネント: v-for を使用して学生情報配列を走査します <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の違いは次のとおりです。
VUE をベースにしたシンプルな学生情報管理システムの実装に関するこの記事はこれで終わりです。VUE 学生情報管理システムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 VUE をベースにしたシンプルな学生情報管理システムの実装に関するこの記事はこれで終わりです。VUE 学生情報管理システムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Vue で v-if と v-for を一緒に使用することが推奨されない理由の詳細な説明
>>: Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...
目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...
冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...
インデックスを使用してクエリを高速化する1. はじめにWeb 開発には、ビジネス テンプレート、ビジ...
最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...
目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...
それは何ですか? GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...
昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
vsCode のバージョンは最近更新され、現在のバージョン番号は 1.43 です。実際、vsCode...
オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...
React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...