使用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>