vue實作圖書管理的增删改查功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.grid {
margin: auto;
width: 530px;
text-align: center;
}
.grid table {
border-top: 1px solid #C2D89A;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed #F3DCAB;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #F3DCAB;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
</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" name='name' v-on:keyup.enter="handle" v-model='name'>
<button @click='handle'>送出</button>
</div>
</div>
</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.date}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='delBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
圖書管理-圖書清單展示功能
注意事項：<a href="" target="_blank" rel="external nofollow" @click.prevent>修改</a>
事件綁定時，可以隻添加修飾符，而不綁定事件函數
prevent阻止事件的預設行為
*/
var vm = new Vue({
el: '#app',
data: {
flag: false,
id: '',
name: '',
books: [{
id: 1,
name: '三國演義',
date: ''
}, {
id: 2,
name: '水浒傳',
date: ''
}, {
id: 3,
name: '紅樓夢',
date: ''
}, {
id: 4,
name: '西遊記',
date: ''
}]
},
methods: {
handle: function () {
//添加圖書
var book = new Object();
/*
js 建立空對象的3種方法
var obj1 = {};
var obj2 = Object.create(null);
var obj3 = new Object();
*/
if (this.flag) {
//根據目前id去更新數組中對應的資料
this.books.some((item) => {
if (item.id == this.id) {
//讓數組中的name變成輸入框的name
item.name = this.name;
//找到了,終止循環
return true;
}
});
this.flag = false;
} else {
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
}
//執行完添加或删除後,表單清空
this.id = '';;
this.name = '';
},
toEdit: function (id) {
console.log(id);
//禁止修改id
this.flag = true;
//根據id查詢出要編輯的資料
//第一種方式，過濾器過濾出數組中對應的id對象,但是一個數組
var book = this.books.filter(item => {
return item.id == id;
});
//這兩個可以用來判斷js變量是數組還是對象
// console.log(Array.prototype.isPrototypeOf(book[0]));
// console.log(Object.prototype.toString.call(book[0]));
this.id = book[0].id;
this.name = book[0].name;
//----------------------------------
//第二種方式擷取books，周遊
/* var book = {};
for (let i = 0; i < this.books.length; i++) {
if (i+1 == id) {
book = this.books[i];
break;
}
}
this.id = book.id;
this.name = book.name; */
},
delBook: function (id) {
//删除圖書
//方法一:
//findIndex查找傳過來的參數id和數組中的id相等,則傳回對應id 的索引
//函數的參數item代表數組中某一項資料
var index = this.books.findIndex((item) => {
return item.id == id;
});
//根據索引删除數組元素
this.books.splice(index, 1);
//-----------------------------
//方法二:通過filter方法删除
//filter 把數組中id與傳過來的id比較,不相等的過濾出來,形成新的數組,指派給books
// this.books = this.books.filter((item) => {
// return item.id != id;
// })
}
},
});
</script>
</body>
</html>
![父子元件間傳值的實作父子元件間傳值的實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)