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


												


											
vue 实现商品列表的添加、删除，搜索的更多相关文章
	

    
						
  1. tab一些 添加 删除 搜索
		
    tab一些 添加 删除 搜索 案例 <!DOCTYPE html><html lang="en"><head> <meta charset ...
    
		
    2. 
						
  2. vue简单案例_动态添加删除用户数据
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    3. 
						
  3. Vue学习之路第十六篇：车型列表的添加、删除与检索项目
		
    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
    
		
    4. 
						
  4. vue实现购物清单列表添加删除
		
    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
    
		
    5. 
						
  5. Vue nodejs商城项目-商品列表价格过滤和加入购物车功能
		
    一.价格过滤功能 GoodsList.vue >>点击价格区间时发送请求 methods:{     getGoodsList(flag){         var param = {   ...
    
		
    6. 
						
  6. vue 实现todolist，包含添加，删除，统计，清空，隐藏功能
		
    vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...
    
		
    7. 
						
  7. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）
		
    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
    
		
    8. 
						
  8. vue实战记录（三）-  vue实现购物车功能之渲染商品列表
		
    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
    
		
    9. 
						
  9. 向redis中添加删除list列表
		
    转: 向redis中添加删除list列表 2018年04月18日 15:44:54 luo_yu_1106 阅读数:4082   一.添加 向redis中添加队列有两种方式 1.lpush l是lef ...
    
		
    10. 
						
  10. springmvc使用数组接收页面商品列表批量删除传过来的参数，并完成批量删除的操作。
		
    1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. CentOS 7.9编译安装Python-3.10.13
			
    目录 查看CentOS版本.系统默认gcc版本.Python版本和pip版本 部署Python-3.10.13 测试 将yum中的Python版本修改为系统原来的2.7.5版本 查看CentOS版本. ...
    
			
    2. 
						
  2. Effective Python：第2条　遵循PEP 8风格指南
			
    PEP8文档:https://peps.python.org/pep-0008/ 与空白有关的建议: 用空格(space)表示缩进,而不要用制表符(tab). 和语法相关的每一层缩进都用4个空格表示. ...
    
			
    3. 
						
  3. 说说对 Node 中的 Buffer 的理解？应用场景？
			
    一.是什么 在Node应用中,需要处理网络协议.操作数据库.处理图片.接收上传文件等,在网络流和文件的操作中,要处理大量二进制数据,而Buffer就是在内存中开辟一片区域(初次初始化为8KB),用来存 ...
    
			
    4. 
						
  4. P7177 [COCI2014-2015#4] MRAVI 题解
			
    思路. 我们知道最初添加的液体越多,那么每个蚂蚁得到的液体也就越多,又因为标签里有深搜,所以可以用 DFS+二分解决(感觉说了一通废话),算是比较常规的一种解法了. 在此题中我们需要魔改一下建树,需在 ...
    
			
    5. 
						
  5. Docker 内安装 SSH 服务
			
    有时候我们想把 Docker 环境提供给别人,但是又不想提供宿主机,那么可以在 Docker 容器内运行 SSH 服务,使容器保持运行并提供给对方使用即可,下面我们以 CentOS 7.6 的 Doc ...
    
			
    6. 
						
  6. 【笔记】go语言--（Slice）切片的概念
			
    go--(Slice)切片的概念 //切片是什么,定义一个arr,定义一个s为arr中的2到6,这个s就是一个切片 arr := [...]int{0,1,2,3,4,5,6,7} s := arr[ ...
    
			
    7. 
						
  7. 关于 Data Lake 的概念、架构与应用场景介绍
			
    数据湖(Data Lake)概念介绍 什么是数据湖(Data Lake)? 数据湖的起源,应该追溯到2010年10月,由 Pentaho 的创始人兼 CTO, James Dixon 所提出,他提出的 ...
    
			
    8. 
						
  8. python3使用dpkt生成PCMA格式rtp流
			
    操作系统 :CentOS 7.6_x64 Python版本:3.9.12 dpkt版本:1.9.8 PCMA编码是VoIP通信中常见的格式,今天整理下CentOS7环境下,python3如何使用dpk ...
    
			
    9. 
						
  9. 用友BIP全面预算
			
    全面预算是企业在经营过程中制定并实施的一种财务管理工具,它考虑了企业的各个方面,包括销售.采购.生产.财务.人力资源等,以全面的视角规划和控制企业的财务活动. 用友BIP全面预算数智化解决方案利用了& ...
    
			
    10. 
						
  10. 解决Host key verification failed.(亲测有效)
			
    哈喽哇,今天在访问远程服务器的时候,出现了一个小问题. 原因:之前ssh联系过服务器,重置服务器后,再次连接服务器,就会出这个问题. 一.发现问题 问题如下图代码: $ ssh root@108.61 ...
    
			
    11.