所用到的技术vue+bootstrap
效果图如下
代码如下所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.top-input {
height: 34px;
}
</style>
</head>
<body>
<div id = "app">
<label>id:</label>
<input class="top-input" type = "text" placeholder = "请输入id" v-model = "id">
<label>name:</label>
<input class="top-input" type = "text" placeholder = "请输入name" v-model = "name">
<button type = "button" class="btn btn-primary" @click = "add()">添加</button>
<label>搜索关键字:</label>
<input class="top-input" type = "text" placeholder = "请输入关键字" v-model = "keywords">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for = "item in search(keywords)" :key = "item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href=" " @click.prevent = "deleteC(item.id)">删除</a></td>
<!--加修饰符.prevent阻止a链接的默认行为-->
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',
listTwo: [],
list: [
{id: 1, name: '奔驰', ctime: new Date()},
{id: 2, name: '宝马', ctime: new Date()},
{id: 3, name: '奥迪', ctime: new Date()},
]
},
methods: {
add() {
const commodities = {id: this.id, name: this.name, ctime: new Date()};
this.list.push(commodities);
this.id = this.name = '';
},
deleteC(id) {
this.list.some((item, i) => {
if (item.id === id) {
this.list.splice(i, 1);
return true;
}
});
},
search(keyword) {
const newList = [];
this.list.forEach((item) => {
if (item.name.indexOf(this.keywords) != -1) {
newList.push(item);
}
})
return newList;
},
}
})
</script>
</body>
</html>
在这段代码中,删除按钮的方法也可以使用数组的some方法
deleteC(id) {
this.list.some((item, i) => {
if (item.id === id) {
this.list.splice(i, 1);
return true;
}
);
},
在这段代码中,搜索的方法也可以使用filter,并且把indexOf换成了数组的includes方法
search(keyword) {
return this.list.filter((item) => {
if (item.name.includes(this.keywords)) {
return true;
}
});
},
但是,以上的添加也是存在bug的,因为还没有进行验证,具体的验证方法,这里我就不一一阐述了,之后的博客会专门写表单验证的具体方法。