使用vue实现查询，显示，删除
前端框架：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>图书管理系统</h1>
<p>
<label>图书名称：</label>
<input type="text" v-model="bookName" placeholder="请输入图书名称关键字..." />
</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代码：
<!---导入外部vue.js->
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bookList: [// 模拟数据源
{
name: "原则",
author: "[美] 瑞·达利欧 / 刘波、綦相 / 中信出版社",
price: 98.00
},
{
name: "爸爸，穷爸爸",
author: "[美] 罗伯特・T・清崎、莎伦・L・莱希特 / 杨君，杨明 / 世界图书出版公司",
price: 18.80
},
{
name: "影响力",
author: "[美] 罗伯特·西奥迪尼 / 陈旭 / 中国人民大学出版社",
price: 45.00
},
],
bookName: ""
},
methods: {
doRemove: function (index) {
if (confirm("是否删除该图书？")) {
this.books.splice(index, 1);
}
}
},
computed: {// 实现查询
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>
