vue 实现商品列表的添加、删除，搜索

最新推荐文章于 2023-12-11 11:02:03 发布

凌晨三点半日光

最新推荐文章于 2023-12-11 11:02:03 发布

阅读量815

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43156442/article/details/106764062

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表案例</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
.form-inline {
padding: 50px 0 20px 0;
}

.form-group {
margin-right: 20px;
}
</style>
</head>

<body>


<div id="app">
<div class="container">

<form class="form-inline">

<div class="form-group">

<label for="exampleInputName2">ID：</label>

<input type="text" class="form-control" id="exampleInputName2" placeholder="请输入您的ID" v-model="id">

</div>
<div class="form-group">

<label for="exampleInputEmail2">Name：</label>

<input type="text" class="form-control" placeholder="请输入您的姓名" v-model="name">

</div>

<button type="button" class="btn btn-primary" @click="add">提交</button>

<div class="form-group">
<input type="text" placeholder="please enter the keyword……" class="form-control" v-model="keywords" />
</div>
<!-- <button type="button" class="btn btn-primary">search</button> -->

</form>

<table class="table table-hover table-striped">

<tr>
<td>ID</td>

<td>品牌名称</td>

<td>添加时间</td>

<td>操作</td>

</tr>

<tr v-for="item,index in search(keywords)" :key='item.id'>

<td>{{item.id}}</td>

<td>{{item.pp_name}}</td>

<td>{{item.add_time | getTime()}}</td>

<td>

<a href="" @click.prevent='del(item.id)'>删除</a>

</td>

</tr>

</table>

</div>

</div>

<script src="js/vue.js"></script>

<script>
var app = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '',
list: [{
id: 1,
pp_name: '安踏',
add_time: new Date()
},
{
id: 2,
pp_name: '李宁',
add_time: new Date()
},
{
id: 3,
pp_name: '捷豹',
add_time: new Date()
},
{
id: 4,
pp_name: '悍马',
add_time: new Date()
}
]
},
methods: {
add: function() {
// 数据插入数组操作
this.list.push({
id: this.id,
pp_name: this.name,
add_time: new Date()
});
this.id = this.name = ''
},

/* 
根据id删除数据

分析： 先要找到这一项数据的id，然后根据id删除索引
找到索引之后直接调用数组的splice方法
*/
del: function(id) {
this.list.some((item, i) => {
if (item.id === id) {
this.list.splice(i, 1);

// 在数组some中 如果返回值为true，则会立即终止后续的循环
return true;
}
})
},
//根据关键字进行数据的搜索
search(keywords) {
var newList = [] //定义一个空的数组
this.list.forEach(item => {
//判断字段的值是否和keywords相等
var aa = item.pp_name;
console.log(aa)
if (aa.indexOf(keywords) != -1) {
newList.push(item)
}
});
return newList;


// return this.list.filter(item => {
// if(item.pp_name.includes(keywords)){
// return item
// }
// })
}
},
// 时间的过滤
filters: {
getTime: function(value) {
let date = new Date(value),
Y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
h = date.getHours(),
min = date.getMinutes(),
s = date.getSeconds();
if (m < 10) {
m = '0' + m;
}
if (d < 10) {
d = '0' + d;
}
if (h < 10) {
h = '0' + h;
}
if (min < 10) {
min = '0' + min;
}
if (s < 10) {
s = '0' + s;
}

let t = Y + '-' + m + '-' + d + ' | ' + h + ':' + min + ':' + s;
return t;
}
}

})
</script>
</body>

</html>