<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h5>品牌列表信息</h5>
</div>
<div class="panel-body form-inline">
<input type="text" style="width:300px" placeholder="品牌ID" v-model="id">
<input type="text" style="width:300px" placeholder="品牌名称" v-model="name">
<button type="button" class="btn btn-primary" @click="add">添加</button>
<input type="text" placeholder="搜索关键字" style="width:300px" v-model="keywords">
</div>
</div>
<table class="table">
<thead>
<tr>
<th>品牌ID</th>
<th>品牌名称</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in test(keywords)" :key="item.bid">
<th>{{item.bid}}</th>
<th>{{item.bname}}</th>
<th>{{item.time}}</th>
<th><a href="" @click.prevent="del(item.bid)">删除</a></th>
</tr>
</tbody>
</table>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
brankList: [
{ bid: 1001, bname: '奔驰1', time: new Date() },
{ bid: 1002, bname: '奔驰', time: new Date() },
{ bid: 1003, bname: '奔驰12', time: new Date() },
],
keywords: ''
},
methods: {
add() {
var brand = { bid: this.id, bname: this.name, time: new Date() };
this.brankList.push(brand);
this.id = this.name = '';
},
test(word) {
// 1.for循环
// var newlist = [];
// // word 查询关键字
// for(index in this.brankList){
// if(this.brankList[index].bname.indexOf(word)!=-1){
// newlist.push(this.brankList[index]);
// }
// }
// return newlist;
// 2.forEach循环
// var newlist = [];
// this.brankList.forEach(element => {
// if(element.bname.indexOf(word)!=-1){
// newlist.push(element)
// }
// });
// return newlist;
// 3.some循环
// var newlist = [];
// this.brankList.some(element => {
// if (element.bname.indexOf(word) != -1) {
// newlist.push(element)
// }
// });
// return newlist;
var newList = this.brankList.filter(item => {
if (item.bname.includes(word)) {
return item;
}
})
return newList;
},
// 删除
del(num) {
// this.brankList.forEach((item, index) => {
// if (item.bid == num) {
// this.brankList.splice(index, 1);
// }
// });
// this.brankList.some((item, index) => {
// if (item.bid == num) {
// this.brankList.splice(index, 1);
// return true;
// }
// });
var index = this.brankList.findIndex(item=> {
if(item.bid == num){
return true;
}
})
this.brankList.splice(index, 1);
}
},
})
</script>
</body>
</html>
网友评论