大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的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. Linux基础-01：Linux命令的基本格式
			
    2.1.1 命令提示符 在CentOS 7操作系统中,Linux命令提示符就像是你与电脑交流的一个小标志,告诉你系统已经准备好接受你的指令了. 它通常会显示在你打开的终端窗口或控制台的最前面. 让我们 ...
    
			
    2. 
						
  2. 【Oracle】Oracle常用分析函数（排名）
			
    Oracle常用分析函数(排名) 一般来说,遇到需要对数据进行排序的时候,可以使用分析函数,一般常用的有三个,rank,dense_rank,row_number --Oracle常用分析函数(排名) ...
    
			
    3. 
						
  3. 力扣454(java&python)-四数相加 II（中等）
			
    题目: 给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足: 0 <= i, j, k, l &l ...
    
			
    4. 
						
  4. Hologres如何支持超高基数UV计算(基于roaringbitmap实现)
			
    简介: 本文将会介绍Hologres基于roaringbitmap实现超高基数的UV计算 RoaringBitmap是一种压缩位图索引,RoaringBitmap自身的数据压缩和去重特性十分适合对于大 ...
    
			
    5. 
						
  5. 深度 | 从DevOps到BizDevOps, 研发效能提升的系统方法
			
    ​简介:研发效能提升不知从何下手.一头雾水?阿里资深技术专家一文为你揭秘研发效能提升的系统方法. ​ 注:本文是对云栖大会何勉分享内容的整理 这几年"研发效能"一直是热词,很多组织 ...
    
			
    6. 
						
  6. DevOps发布策略简介
			
    简介: DevOps追求更短的迭代周期.更高频的发布.但发布的次数越多,引入故障的可能性就越大.更多的故障将会降低服务的可用性,进而影响到客户体验.所以,为了保证服务质量,守好发布这个最后一道关,阿里 ...
    
			
    7. 
						
  7. [Auth] 浅谈 jwt token 的妙处
			
    无状态(易扩展). 有过期时间限制,相对安全(可以有多个有效的 token). 更轻量(适合少量信息),类似传统 query string 签名方式. 标准统一(跨语言). Refer:JWT Aut ...
    
			
    8. 
						
  8. 支持 dotnet 6 的 dnSpy 神器版本
			
    官方的 dnSpy 在 2021 时,由于某些吃瓜的原因 wtfsck 将 dnSpy 给 Archived 掉,在大佬被哄好之前,预计是不再更新.最新官方版本对 dotnet 6 的支持较弱,对于很 ...
    
			
    9. 
						
  9. k8s安全---安全机制之RBAC授权(14)
			
    一.k8s 安全管理:认证.授权.准入控制概述 k8s 对我们整个系统的认证,授权,访问控制做了精密的设置:对于 k8s 集群来说,apiserver 是整 个集群访问控制的唯一入口,我们在 k8s  ...
    
			
    10. 
						
  10. DOM操作学习
			
    一.DOM对象-查找元素 # 1.直接查找 # 获取标签对象的方式: document.getElementById('#id') #根据ID获取一个标签(获取的是单独的对象) document.ge ...
    
			
    11.