vue實現可增刪查改的成績單

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> vue實現可增刪查改的成績單

vue實現可增刪查改的成績單

編輯：關於JavaScript

前端變化層出不窮，去年NG火一片，今年react,vue火一片，ng硬著頭皮看了幾套教程，總被其中的概念繞暈，react是faceback出品，正在不斷學習中，同時抽時間了解了vue,查看了vue官方文擋，看完格外入眼，總覺得要拿來試一試手。

正好周未，做一個小成績單玩玩，以前有用avalon也做過一個類似的，從過程來看，二個框架都在避免開發者頻繁操作dom,脫離dom苦海，安心處理數據業務邏輯，從二個示例來看，可以成倍的提高開發效率。

vue示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue成績單</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 .report_card{
 width:800px;
 margin:0 auto;
 font-size:12px;
 }
 .report_card table{
 width:100%;
 border-collapse: collapse;
 text-align:center;
 }
 .report_card caption{
 font-size:14px;
 text-align:left;
 line-height:30px;
 font-weight:bold;
 }
 .report_card table th,.report_card table td{
 border:1px solid #ccc;
 }
 .report_card table th{
 height:36px;
 background:#f8f8f8;
 }
 .report_card table td{
 height:32px;
 background:#f8f8f8;
 }
 .content{
 width:100%;
 height:32px;
 line-height:32px;
 position:relative;
 }
 .content input{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 color:#999;
 padding-left:10px;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 height:30px;
 border:1px solid blue;
 -webkit-animation:borderAn 2s infinite;
 animation:borderAn 2s infinite;
 }
 .studyForm select{
 width:100px;
 height:28px;
 }
 .searchInput{
 width:200px;
 height:28px;
 }
 .searchButton{
 width:100px;
 height:32px;
 }
 @-webkit-keyframes borderAn{
 0%{
 border-color:transparent;
 }
 100%{
 border-color:blue;
 }
 }
 @keyframes borderAn{
 0%{
 border-color:transparent;
 }
 100%{
 border-color:blue;
 }
 }
 .studyForm{
 margin:10px 0;
 }
 .studyForm input{
 width:120px;
 height:30px;

 }
 </style>
</head>
<body>
 <div class="report_card" id="reportCard">
 <table class="studyForm">
 <caption>成績錄入/處理</caption>
 <tbody>
 <tr>
  <td width="170">學號:<input type="text" v-model="addArr.stuId"></td>
  <td width="170">姓名:<input type="text" v-model="addArr.name"></td>
  <td width="170">語文:<input type="text" v-model="addArr.ywScores"></td>
  <td width="170">數學:<input type="text" v-model="addArr.sxScores"></td>
  <td colspan="2" width="120">
  <a href="javascript:void(0);" v-on:click="submitStu">錄入</a>
  <a href="javascript:void(0);" v-on:click="resetStu">重置</a>
  </td>
 </tr>
 <tr>
  <td align="left">
  搜索：<input v-model="searchTxt" type="text" class="searchInput">
  </td>
  <td>
  排序字段:
  <select v-model='sortKey'>
  <option value="ywScores">語文</option>
  <option value="sxScores">數學</option>
  </select>
  </td>
  <td>
  排序類型：
  <select v-model="sortClass">
  <option value="1">升序</option>
  <option value="-1">降序</option>
  </select>
  </td>
  <td colspan="3"></td>
 </tr>
 </tbody>
 </table>
 <table class="scoreList">
 <caption>成績列表</caption>
 <thead>
 <th width="170">學號</th>
 <th width="170">姓名</th>
 <th width="170">語文</th>
 <th width="170">數學</th>
 <th colspan="2" width="120">操作</th>
 </thead>
 <tbody>
 <tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass">
  <td><div class="content">{{item.stuId}}<input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.name}}<input v-model="editArr.name" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.ywScores}}<input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"></div></td>
  <td><div class="content">{{item.sxScores}}<input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"></div></td>
  <td>
  <a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol">編輯</a>
  <a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol">取消</a>
  <a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol">確認</a>
  </td>
  <td><a href="javascript:void(0);" v-on:click="deleteStu($index)">刪除</a></td>
 </tr>
 </tbody>
 </table>
 </div>
 <script type="text/javascript" src="vue.js"></script>
 <script type="text/javascript">
 var studyArrJson=[
 {'stuId':'stu0001','name':'張三','ywScores':85,'sxScores':90},
 {'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
 {'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
 {'stuId':'stu0004','name':'劉六','ywScores':58,'sxScores':96}
 ];
 var reportCardVm=new Vue({
 el:'#reportCard',
 data:{
 studyArr:studyArrJson,//成績花名冊
 addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表單字段
 nowEditCol:-1,//當前編輯的行
 editStatus:false,//當前是否在編輯狀態
 searchTxt:'',//搜索字段
 sortKey:'ywScores',//排序健
 sortClass:'1',//升降排序1為升,-1為降
 },
 methods:{
 //啟動索引index數據編輯
 startEdit:function(index){
  this.nowEditCol=index;
 },
 //取消編輯狀態
 cancelEdit:function(){
  this.nowEditCol=-1;
 },
 //啟動索引index數據修改確認
 sureEdit:function(index){
  this.studyArr.$set(index,this.editArr);
  this.nowEditCol=-1;
 },
 //刪除索引index數據
 deleteStu:function(index){
  this.studyArr.splice(index,1);
 },
 //新增成績
 submitStu:function(){
  var addArr={
  'stuId':this.addArr.stuId,
  'name':this.addArr.name,
  'ywScores':this.addArr.ywScores,
  'sxScores':this.addArr.sxScores
  };
  this.studyArr.push(addArr);
  this.resetStu();
 },
 //復位新增表單
 resetStu:function(){
  this.addArr={
  'stuId':'',
  'name':'',
  'ywScores':'',
  'sxScores':''
  }
 }
 },
 computed:{
 //存儲當前編輯的對象
 editArr:function(){
  var editO=this.studyArr[this.nowEditCol];
  return {
  'stuId':editO.stuId,
  'name':editO.name,
  'ywScores':editO.ywScores,
  'sxScores':editO.sxScores
  }
 }
 }
 })
 </script>
</body>
</html>

在線測試地址：http://jsbin.com/kavugufuci/edit?html,output

一個VUE對象就是一個view model,基本由下面幾部分組成

其中data主動存放當前view的屬性也就是在頁面上能用來綁定的數據，methods主要用來存當前view model的方法，computed也是用來存當前view的屬性的，只是它是計算屬性，它的值可能由data裡某一個值直接影響，相當於你修改了view裡的data裡的某一個值，它會自動跟著修改，就想當於ng裡用$watch來實現的功能，當前vue也提示了$watch功能,但是用計算屬性使用起來更快捷高效。

當前示例view model分析

這是當前的view model屬性，如果數據要綁定到html上去，可響應的那都要在這一塊初始定好，如果後續會用到的也要在初始的時候掛好位置，後期手動添加是不會起作用的，此項目各字段功能具體看文字注釋。

這是此 view model的方法，可直接綁定到html上也可以內部以this.開頭來調用，內部的this都是指向當前view model，可以調用當前view model上的所有屬性跟方法，這裡也是我們處理數據，書寫業務邏輯的地方，此示例項目各方法功能具體看文字注釋。

這裡是計算屬性，它的值由data下的nowEditCol來決定，相當於你寫一個$watch方法在監聽nowEditCol,但是此處vue內部幫你處理了，推薦在項目中使用。

當前項目使用view model方式，都是直接綁定在DOM元素上來做的，這也是熱門的MVVM框架的模式.

我一直都有在了解vue跟avalon ,ng,react這方面的東東，但是考慮到切入速度跟入手難受，我首先選擇的是vue,avalon,但是又由於vue的兼容，如果要使用vue就得放棄

安卓4.2以下的版本的原生浏覽器，於是就開始使用avalon，用avalon 做過一些H5項目，但是由於avalon只是一個司徒正美個人項目總覺得在一些穩定性和未來發展上感覺

很難說，在跑很多測試案例的時候也發現一些BUG，當然在我做的那些項目還沒有掉進avalon的大坑，但是avalon的兼容是值得稱贊的，司徒正美應該是花費了很大精力，

如果你做的項目要兼容到非標准的浏覽就如IE6-7-8，又想體驗MVVM框架開發的高效的時候，avalon是你的首選。在目前兼容環境越來越好的情況，後期如果再接到H5的項目，

我會選擇用vue來做做項目。

更多vue的學習了解，請查閱官方文擋：http://cn.vuejs.org/guide/，這也是你入手vue最佳地方。

本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

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

關於JavaScript

js顯示動態時間的方法詳解: 本文實例講述了js顯示動態時間的方法。分享給大家供大家參考，具體如下：Date對象的方法Date 對
解決wx.onMenuShareTimeline出現的問題: wx.onMenuShareTimeline使用注意事項我在開發測試過程中,發現使用wx.onMen
詳解Jquery實現ready和bind事件: 講這一節之前，先回顧之前一段代碼： (function (win) { var _$ =

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章