1、圖書列表
- 實現靜態列表效果
- 基於數據實現模板效果
- 處理每行的操作按鈕
靜態列表的效果：
html結構：
1 <div id="app"> 2 <div class="grid"> 3 <table> 4 <thead> 5 <tr> 6 <th> 編號</th> 7 <th>名稱</th> 8 <th>時間</th> 9 <th>操作</th> 10 </tr> 11 12 </thead> 13 <tbody> 14 <tr> 15 <td>1</td> 16 <td>javascript</td> 17 <td>2020-03-10</td> 18 <td>刪除</td> 19 </tr> 20 <tr> 21 <td>2</td> 22 <td>javascript</td> 23 <td>2020-03-10</td> 24 <td>刪除</td> 25 </tr> 26 </tbody> 27 </table> 28 29 30 31 </div> 32 </div>
css樣式：
1 <style> 2 .grid { 3 margin: auto; 4 width: 500px; 5 text-align: center; 6 } 7 8 .grid table { 9 width: 100%; 10 border-collapse: collapse; 11 } 12 13 .grid table th { 14 color: white; 15 } 16 17 .grid th, 18 td { 19 padding: 10px; 20 border: 1px dashed pink; 21 height: 35px; 22 line-height: 35px; 23 color: #000; 24 } 25 26 .grid th { 27 background-color: pink; 28 } 29 </style>
基於數據實現模板效果：
首先創建需要用到的假數據：
<script>
var vm = new Vue({
el: '#app',
data: {
books: [{
id: 1,
name: '三國演義',
date: ''
}, {
id: 2,
name: '水滸傳',
date: ''
}, {
id: 3,
name: '紅樓夢',
date: ''
}]
}
})
</script>
將上面的數據填充與模板中：
1 <tbody> 2 <tr :key='item.id' v-for='item in books'> 3 <td>{{item.id}}</td> 4 <td>{{item.name}}</td> 5 <td>{{item.date}}</td> 6 <td> 7 <a href="" @click.prevent>修改</a> 8 <span>|</span> 9 <a href="" @click.prevent>刪除</a> 10 </td> 11 </tr> 12 13 </tbody>
將數據填充於模板的效果：
處理每行的操作按鈕：
2、添加圖書功能
- 實現表單的靜態效果
- 添加圖書表單域數據綁定
- 添加按鈕事件綁定
- 實現添加業務邏輯
實現表單的靜態效果：
加入表單html結構；
1 <body> 2 <div id="app"> 3 <div class="grid"> 4 <div> 5 <h1>圖書管理</h1> 6 <div class="book"> 7 <div> 8 <label for="id">編號:</label> 9 <input type="text" id="id" > 10 <label for="name">名稱:</label> 11 <input type="text" id="name"> 12 <button>添加</button> 13 </div> 14 </div> 15 </div> 16 <table> 17 <thead> 18 <tr> 19 <th> 編號</th> 20 <th>名稱</th> 21 <th>時間</th> 22 <th>操作</th> 23 </tr> 24 25 </thead> 26 <tbody> 27 <tr :key='item.id' v-for='item in books'> 28 <td>{{item.id}}</td> 29 <td>{{item.name}}</td> 30 <td>{{item.date}}</td> 31 <td> 32 <a href="" @click.prevent>修改</a> 33 <span>|</span> 34 <a href="" @click.prevent>刪除</a> 35 </td> 36 </tr> 37 38 </tbody> 39 </table> 40 41 42 43 </div> 44 </div> 45 <script src="./js/vue.js"></script> 46 <script> 47 var vm = new Vue({ 48 el: '#app', 49 data: { 50 id: '', 51 name: '', 52 books: [{ 53 id: 1, 54 name: '三國演義', 55 date: '' 56 }, { 57 id: 2, 58 name: '水滸傳', 59 date: '' 60 }, { 61 id: 3, 62 name: '紅樓夢', 63 date: '' 64 }] 65 } 66 }) 67 </script> 68 69 70 </body>
表單部分用到的css樣式：
.book { padding-top: 10px; padding-bottom: 5px; background-color: pink; }
添加圖書表單域數據綁定
<div>
<label for="id">編號:</label>
<input type="text" id="id" v-model='id'>
<label for="name">名稱:</label>
<input type="text" id="name" v-model='name'>
<button @click='add'>添加</button>
</div>
vue：
data: { id: '', name: '' }
添加按鈕事件綁定
<button @click='add'>添加</button>
實現添加業務邏輯：
在vue中定義的add方法：
methods: { add: function() { //添加圖書 var book = {}; book.id = this.id; book.name = this.name; this.books.push(book); //清空表單 this.id = ''; this.name = ''; } }
實現添加圖書功能效果圖：
3、修改圖書
- 修改信息填充表單
- 修改后重新提交表單
- 重用修改和添加的方法
實現描述：點擊修改將信息填充到表單
實現修改信息填充表單效果圖：
獲取需要修改的信息的id，作為參數進行傳遞：
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent>刪除</a>
</td>
在vue中書寫toEdit方法：
toEdit: function(id) { console.log(id); //根據ID查詢出要編輯的數據使用過濾的方法 var book = this.books.filter(function(item) { //需要進行修改的id等於點擊修改的id return item.id == id; }) console.log(book); //得到的book是一個數組 //將查詢的數據填充到表單中 this.id = book[0].id; this.name = book[0].name; }
修改后重新提交表單：
編號是不能修改的，原因是由於是根據id進行修改的，編號是做為數據的唯一標識因此需要進行禁用表單編號的輸入；需要使用v-bind綁定屬性disabled來進行禁用
<input type="text" id="id" v-model='id' :disabled='flag'>
重用修改和添加的方法：
最終實現修改圖書的效果：
代碼重用：
1 methods: { 2 add: function() { 3 if (this.flag) { 4 //處於編輯操作 5 //就是根據當前的id去更新數組中對應的數據 6 this.books.some((item) => { 7 if (item.id == this.id) { 8 item.name = this.name; 9 //完成更新操作后終止循環 10 return true; 11 } 12 13 }); 14 this.flag = false; 15 } else { 16 //添加圖書 17 var book = {}; 18 book.id = this.id; 19 book.name = this.name; 20 book.date = ''; 21 this.books.push(book); 22 //清空表單 23 this.id = ''; 24 this.name = ''; 25 26 } 27 this.id = ''; 28 this.name = ''; 29 30 }, 31 toEdit: function(id) { 32 //禁止修改id 33 this.flag = true; 34 console.log(id); 35 //根據ID查詢出要編輯的數據使用過濾的方法 36 var book = this.books.filter(function(item) { 37 //需要進行修改的id等於點擊修改的id 38 return item.id == id; 39 }) 40 console.log(book); //得到的book是一個數組 41 //將查詢的數據填充到表單中 42 this.id = book[0].id; 43 this.name = book[0].name; 44 45 46 47 } 48 }
4、刪除圖書
- 刪除按鈕綁定事件處理方法
-
<td> <a href="" @click.prevent='toEdit(item.id)'>修改</a> <span>|</span> <a href="" @click.prevent='del(item.id)'>刪除</a> </td> - 實現刪除業務邏輯
第一種方法：
1 del: function(id) { 2 //刪除圖書 3 //根據id從數組中查找元素的索引、 4 var index = this.books.findIndex(function(item) { 5 console.log(item); 6 7 return item.id = id; 8 }); 9 console.log(index); 10 11 //根據索引刪除數組元素 12 this.books.splice(index, 1); 13 14 }
第二種方法：
1 del: function(id) { 2 //刪除圖書 3 4 //第二種方法 通過filter方法進行刪除 5 this.books = this.books.filter(function(item) { 6 //返回結果是過濾之后的結果，因此顯示出的是id不相等的數據 7 return item.id != id; 8 }) 9 10 }
實現的刪除效果：
過濾器（格式化日期）：
Vue.filter('format', function(value, arg) { function dateFormat(date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date\((\d+)\)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小時 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t) { var v = map[t]; if (v !== undefined) { if (all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; } return dateFormat(value, arg); })
過濾器格式化日期：
<td>{{item.date|format('yyyy-MM-dd hh:mm:ss')}}</td>
實現的效果：
