Vue+Bootstrapでシンプルな学生管理システムを実現

参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な内容は以下のとおりです。

では早速レンダリングを見てみましょう

添付のソースコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="utf-8">
 <meta http-equiv="X-UA-compatible" content="IE=edge">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1">
 <title>学生管理システム</title>
 <link href="../public/css/bootstrap.min.css" rel="スタイルシート">
 <link href="../public/css/style.css" rel="スタイルシート">
 <スタイル>
 .row>div{境界線: 1px 実線 #000;}
 .modal{display: block;opacity:1;top: 100px; overflow:visible;}
 </スタイル>
</head>
<本文>
 <div id="アプリ">

 
 <div class="コンテナ">
 <テーブルクラス="テーブルテーブルストライプ">
  <caption>学生管理システム v1.0 - 学生の表示</caption>
  <tr>
  <th>名前</th>
  <th>年齢</th>
  <th>性別</th>
  <th>オペレーション</th>
  </tr>
  <tr v-for="item,stuInfoArr のキー">
  <td>{{アイテム名}}</td>
  <td>{{item.age}}</td>
  <td>{{item.性別}}</td>
  <td><button @click="showDialog(item.name,key)" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">削除</button></td>
  </tr>  
 </テーブル>
 
 <時間>
 <時間>
 <時間>
 <フォームアクション="">
  <テーブルクラス="テーブルテーブルストライプ">
  <caption>生徒情報を追加する</caption>
  <tr>
   <td>プロジェクト</td>
   <td>情報</td>
  </tr>
  <tr>
   <td>名前</td>
   <td>
   <input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="姓" name="stuname">
   </td> 
  </tr>
  <tr>
   <td>年齢</td>
   <td>
   <input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="年齢" name="stuage">
   </td> 
  </tr>
  <tr>
   <td>性別</td>
   <td>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="Male"> 男性</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Female"> 女性</label>
   <label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="Confidential"> 機密</label>
   </td>
  </tr>
  </テーブル>
  <div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="追加を確認" @click="add"/></div>
  </フォーム>
 </div>
 <!-- 削除ボタンの確認ボックス-->
 <div v-show="isDialogShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button @click="isDialogShow=false" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4 class="modal-title" id="exampleModalLabel">確認ボックス</h4>
  </div>
  <div class="modal-body">
  <フォーム>
   <div class="フォームグループ">
   <label for="message-text" class="control-label"><strong class="control-label-name" style="color:blue">{{delStuName}}</strong> を削除してもよろしいですか? </ラベル>
  </div>
  </フォーム>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">戻る</button>
  <a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">確認</button></a>
  </div>
  </div>
 </div>
 </div>
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<スクリプト> 
 新しいVue({
 el: '#app',
 データ： {
 stuInfoArr: [
 { 名前: 'シャオミン'、年齢: 12、性別: "男性" },
 { 名前: 'Xiaohong'、年齢: 10、性別: "女性" }、
 { 名前: 'Xiaogang'、年齢: 16、性別: "機密" }
   ]、
 isDialogShow: false、
 stuName: "",
 スタジオ:"",
 stuGender:"男性"、
 delStuName:'xx',
 索引： ""
   
 },
 方法:{
 追加（） {
 // ビジネスロジック // いずれかが空であれば実行は終了します if(!this.stuName || !this.stuAge) {
  警告("名前と年齢は空欄にできません")
  戻る 
 }
 this.stuInfoArr.push({ 名前: this.stuName 、 年齢: this.stuAge 、 性別: this.stuGender })
 },
 // 削除ボタンをクリックして関数をトリガーします showDialog(name,key) {
 this.isDialogShow = true、
 this.delStuName = 名前、
 this.index = キー
 },
 delStuInfo() {
 // 実際に削除関数を実装します this.stuInfoArr.splice(this.index, 1),
 this.isDialogShow = false
 }
 },   
 })
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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