<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.grid table {
border-top: 1px solid #C2D89A;
width: 100%;
border-collapse: collapse;
}
.grid th,td {
padding: 10;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: orange;
}
.grid .total{
height: 30px;
line-height: 30px;
background-color: #FFA500;
border-top: 1px solid #C2D89A;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>圖書管理</h1>
<div class="book">
<div>
<label for="id">
編號:
</label>
<input type="text" id="id" v-model="id" :disabled="flag"/>
<label for="name">
名稱:
</label>
<input type="text" id="name" v-model="name"/>
<button @click="handle" :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>圖書總數：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.data|format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<!--禁用a標籤的刷新行爲 -->
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>刪除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
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);
})
var vm = new Vue({
el:'#app',
data:{
submitFlag:false,
time:new Date(),
flag:false,
id:'',
name:'',
books:[]
},
methods:{
handle:function(){
if(this.flag){
//編輯
this.books.some((item) =>{
if(item.id == this.id){
item.name = this.name;
return true;
}
})
this.flag = false;
}else{
//添加圖書
var book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
//清空表單
}
this.id = '';
this.name = '';
},
toEdit:function(id){
//禁止修改id
this.flag = true;
//根據id查詢要編輯的數據
var book = this.books.filter(function(item){
return item.id == id;
});
//獲取到的信息填充 到表單
this.id = book[0].id;
this.name = book[0].name;
},
deleteBook:function(id){
var index = this.books.findIndex(function(item){
return item.id == id ;
});
//根據索引刪除
this.books.splice(index,1);
//方法2，根據filter方法進行刪除
//this.books = this.books.filter(function(item){
//return item.id != id;
//})
}
},
computed: {
total: function() {
return this.books.length;
}
},
watch:{
name:function(val){
//驗證圖書名稱
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag){
this.submitFlag = true;
}else{
this.submitFlag = false;
}
}
},
mounted:function(){
//一般用戶獲取後臺數據，填充到模板
var data = [{
id:1,
name:'三國演義',
data:1591005747000
},{
id:2,
name:'水滸傳',
data:1591005747000
},{
id:3,
name:'紅樓夢',
data:1591005747000
},{
id:4,
name:'西遊記',
data:1591005747000
}];
this.books = data;
}
});
</script>
</body>
</html>
