vue實現學生資訊管理系統
阿新 • • 發佈：2020-05-31
本文例項為大家分享了vue實現學生資訊管理系統的具體程式碼，供大家參考，具體內容如下
介面
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue--學生資訊管理系統</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']">學生資訊管理系統</caption>
<tr>
<td>學號</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</tr>
<!-- 遍歷資料 -->
<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>
<!-- 新增資料的表單 -->
<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>
<!-- 用來顯示雙向資料繫結後的編輯效果,資料驅動檢視 -->
<div>
<h2>全部資料</h2>
<ul v-for="(stu,i) in list">
<!--用三種方式獲取資料 -->
<li>{{stu.no}}</li>
<li v-text="stu.name"></li>
<li v-html="stu.age"></li>
</ul>
</div>
</div>
<script>
//建立一個Vue的例項
var vm = new Vue({
el: "#app",//獲取根節點
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>知識點
- 雙向資料繫結
- 文字插值
- 事件繫結
- 方法定義
- 資料遍歷
- 樣式設定
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。