vue實現(xiàn)學生信息管理系統(tǒng)

更新時間：2020年05月30日 10:47:14 作者：_冷月心

這篇文章主要為大家詳細介紹了vue實現(xiàn)學生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)學生信息管理系統(tǒng)的具體代碼，供大家參考，具體內容如下

界面

代碼

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>vue--學生信息管理系統(tǒng)</title>
 <!-- 引包 -->
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <style>
  .title{margin:20px;font-weight: bold;font-size: 20px;}
 </style>
</head>

<body>
 <div id="app">
 <!-- 通過：style設置樣式 -->
 <table :style="[render_table]">
 <!-- 通過：class設置樣式 -->
 <caption :class="['title']">學生信息管理系統(tǒng)</caption>
 <tr>
 <td>學號</td>
 <td>姓名</td>
 <td>年齡</td>
 <td>操作</td>
 
 </tr>
 <!-- 遍歷數(shù)據(jù) -->
 <tr v-for="(stu,i) in list">
 <td><input type="text" v-model="stu.no"></td>
 <td><input type="text" v-model="stu.name"></td>
 <td><input type="text" v-model="stu.age"></td>
 <!-- 綁定點擊事件并傳參 -->
 <td><input type="button" value="刪除" @click="del(i)"></td>
 </tr>
 </table>
 <!-- 添加數(shù)據(jù)的表單 -->
 <div :style="[render_form]">
  <input type="search" v-model="no" placeholder="學號"><br>
  <input type="search" v-model="name" placeholder="姓名"><br>
  <input type="search" v-model="age" placeholder="年齡"><br>
  <input type="button" value="添加" @click="add">
 </div>
 <!-- 用來顯示雙向數(shù)據(jù)綁定后的編輯效果,數(shù)據(jù)驅動視圖 -->
 <div>
 <h2>全部數(shù)據(jù)</h2>
 <ul v-for="(stu,i) in list">
 <!--用三種方式獲取數(shù)據(jù) -->
  <li>{{stu.no}}</li>
  <li v-text="stu.name"></li>
  <li v-html="stu.age"></li>
 </ul>
 </div>
 </div>
 <script>
 //創(chuàng)建一個Vue的實例
 var vm = new Vue({
  el: "#app", //獲取根節(jié)點
  data: {
   no:"",
   name:"",
   age:"",
 list:[
  {
  no:"001",
  name:"TOM",
  age:18,
  },{
  no:"002",
  name:"Juy",
  age:19,
  },
  { no:"003",
  name:"Mlo",
  age:20,
  }
 ],
 //設置樣式
 render_table:{"width":"700px","text-align":"center"},
 render_form:{"width":"300px","text-align":"center","margin-top":"50px"}
  },
  methods:{
   // 添加方法
   add(){
   this.list.push({no:this.no,name:this.name,age:this.age});
   this.no="";this.name="";this.age="";
   },
   //刪除方法
   del(i){
   
   if(confirm("確定刪除嗎？")){
   this.list.splice(i,1);
   }
   
   }
  }
 })
 </script>
</body>

</html>

知識點

雙向數(shù)據(jù)綁定
文本插值
事件綁定
方法定義
數(shù)據(jù)遍歷
樣式設置

更多文章可以點擊《Vue.js前端組件學習教程》學習閱讀。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

當啟動vue項目安裝依賴時報錯的解決方案
這篇文章主要介紹了當啟動vue項目安裝依賴時報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
快速理解Vue路由導航守衛(wèi)
這篇文章主要介紹了快速理解Vue路由導航守衛(wèi)，“導航”表示路由正在發(fā)生變化，vue-router?提供的導航守衛(wèi)主要用來通過跳轉或取消的方式守衛(wèi)導航。有多種機會植入路由導航過程?中：全局的,?單個路由獨享的,?或者組件級的，下面來快速來接具體內容吧
2021-12-12
Vue3 全局使用按鈕截流指令示例代碼
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實現(xiàn)方式略有不同，但實現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-05-05
vue3實現(xiàn)密碼輸入框效果的示例代碼
這篇文章主要為大家詳細介紹了如何利用vue3實現(xiàn)6位的密碼輸入框效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下
2023-08-08
vue項目實例中用query傳參如何實現(xiàn)跳轉效果
這篇文章主要介紹了vue項目實例中用query傳參如何實現(xiàn)跳轉效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue使用$attrs實現(xiàn)爺爺直接向孫組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向孫組件傳遞數(shù)據(jù),文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下
2024-02-02
vue如何解決watch和methods值執(zhí)行順序問題
這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue實現(xiàn)步驟條效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue實現(xiàn)table表格里面數(shù)組多層嵌套取值
這篇文章主要介紹了vue實現(xiàn)table表格里面數(shù)組多層嵌套取值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vuecli+AXdownload下載組件封裝?+css3下載懸浮球動畫效果
當觸發(fā)下載功能的時候,會觸發(fā)一個下載動畫,下載懸浮球會自動彈出,并且閃爍提示有新的下載任務直到下載任務完場提示,接下來通過本文介紹vuecli+AXdownload下載組件封裝?+css3下載懸浮球動畫效果,需要的朋友可以參考下
2024-05-05