前端框架：vue.js
效果圖：
圖書管理顯示，查詢，刪除
頁面css樣式：
<style>
* {
margin: 0;
padding: 0;
}
#App {
width: 900px;
padding: 20px;
margin: 50px auto;
box-shadow: 0 0 10px #828282;
}
table,
td,
th {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%
}
td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px
}
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer
}
tr:nth-of-type(odd) {
background: #fff
}
tr:nth-of-type(even) {
background: #eee
}
p{
padding:20px;
}
button{
display: inline-block;
border:none;
background: #42b983;
padding:10px;
color:#fff;
width:80px;
border-radius: 20px;
cursor: pointer;
}
input{
width:80%;
padding:10px;
}
</style>
html代碼：
<div id="app">
<h1>圖書管理系統(tǒng)</h1>
<p>
<label>圖書名稱：</label>
<input type="text" v-model="bookName" placeholder="請輸入圖書名稱關(guān)鍵字..." />
</p>
<table>
<thead>
<th>名稱</th>
<th>作者</th>
<th>單價</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(book,index) in books">
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>¥{{ book.price | prodFormart }}元</td>
<td><button type="button" @click="doRemove(index)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
js代碼：
<!---導(dǎo)入外部vue.js->
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bookList: [// 模擬數(shù)據(jù)源
{
name: "原則",
author: "[美] 瑞·達(dá)利歐 / 劉波、綦相 / 中信出版社",
price: 98.00
},
{
name: "爸爸，窮爸爸",
author: "[美] 羅伯特?T?清崎、莎倫?L?萊希特 / 楊君，楊明 / 世界圖書出版公司",
price: 18.80
},
{
name: "影響力",
author: "[美] 羅伯特·西奧迪尼 / 陳旭 / 中國人民大學(xué)出版社",
price: 45.00
},
],
bookName: ""
},
methods: {
doRemove: function (index) {
if (confirm("是否刪除該圖書？")) {
this.books.splice(index, 1);
}
}
},
computed: {// 實現(xiàn)查詢
books: function () {
var _this = this;
return _this.bookList.filter(function (book) {
return book.name.indexOf(_this.bookName) != -1;
});
}
},
filters: {
prodFormart: function (val) {
return val.toFixed(2);
}
}
});
</script>
