大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的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. c# unsafe
			
    前言 c# unsafe可以让我们做一些测试的危险操作. 正文 打开unsafe 功能 在 Visual Studio 开发环境中设置此编译器选项 打开项目的"属性"页. 单击&q ...
    
			
    2. 
						
  2. 使用Quorum Journal Manager(QJM)的HDFS NameNode高可用配置
			
    前面的一篇文章写到了hadoop hdfs 3.2集群的部署,其中是部署的单个namenode的hdfs集群,一旦其中namenode出现故障会导致整个hdfs存储不可用,如果是要求比较高的集群,有必 ...
    
			
    3. 
						
  3. javascript现代编程系列教程之五——正零和负零
			
    在JavaScript中,正零(+0)和负零(-0)都代表数值0,它们在大多数情况下是等价的.然而,在某些特定的场景下,正零和负零的行为会有所不同. 除法操作:当0被用作除数时,正零和负零会产生不同的 ...
    
			
    4. 
						
  4. ArcPy自动绘制大量地图并设置地图要素：Python
			
      本文介绍基于Python语言中ArcPy模块,实现ArcMap自动批量出图,并对地图要素进行自定义批量设置的方法. 1 任务需求   首先,我们来明确一下本文所需实现的需求.   现有通过Pyth ...
    
			
    5. 
						
  5. EasyNLP中文文图生成模型带你秒变艺术家
			
    简介: 我们在EasyNLP框架中集成了中文文图生成功能,同时开放了模型的Checkpoint. 导读 宣物莫大于言,存形莫善于画. --[晋]陆机 多模态数据(文本.图像.声音)是人类认识.理解和表 ...
    
			
    6. 
						
  6. 前沿分享｜阿里云资深技术专家 魏闯先：AnalyticDB PostgreSQL年度新版本发布
			
    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云资深技术专家 魏闯先关于"AnalyticDB PostgreSQL年度新版本发布&qu ...
    
			
    7. 
						
  7. Win32 使用 CreateProcess 方法让任务管理器里的命令行不显示应用文件路径
			
    本文记录一个 Win32 的有趣行为,调用 CreateProcess 方法传入特别的参数,可以让任务管理器里的命令行不显示应用文件路径 开始之前,先看看下面这张有趣的图片 可以看到我编写的 Svca ...
    
			
    8. 
						
  8. WPF 让窗口激活作为前台最上层窗口的方法
			
    在 WPF 中,如果想要使用代码控制,让某个窗口作为当前用户的输入的逻辑焦点的窗口,也就是在当前用户活动的窗口的最上层窗口,默认使用 Activate 方法,通过这个方法在大部分设备都可以做到激活窗口 ...
    
			
    9. 
						
  9. 【VMware vCenter】连接和使用vCenter Server嵌入式vPostgres数据库。
			
    vCenter Server 早期支持内嵌(embedded)和外部(external)数据库,内嵌数据库就是vPostgres,基于VMware Postgres数据库(PostgreSQL数据库) ...
    
			
    10. 
						
  10. ubuntu安装 vmware workstation pro 15.1.1
			
    BIOS开启虚拟化 如果没有就参考下面的连接地址设置 http://robotrs.lenovo.com.cn/ZmptY2NtYW5hZ2Vy/p4data/Rdata/Rfiles/726.htm ...
    
			
    11.