大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的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. 操作流程分享：HDMI输入SIL9293C配套NR-9 2AR-18的国产GOWIN开发板
			
    1. 产品概述 HDMI 输入配套板是用于 GOWIN NR-9 和 2AR-18 的开发板配套的 HDMI 输出板子.最 大分辨率支持 1920*1080P,60Hz 刷新率,24 位 RGB 色彩 ...
    
			
    2. 
						
  2. 架构设计｜基于 raft-listener 实现实时同步的主备集群
			
    背景以及需求 线上业务对数据库可用性可靠性要求较高,要求需要有双 AZ 的主备容灾机制. 主备集群要求数据和 schema 信息实时同步,数据同步平均时延要求在 1s 之内,p99 要求在 2s 之内 ...
    
			
    3. 
						
  3. vue 商品sku，笛卡尔算法，商品添加。动态生成table，table添加值后 再生成的table  不改变table之前输入的值
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    4. 
						
  4. 第 6章 Python 应对反爬虫策略
			
    第 6章 Python 应对反爬虫策略 爬取一个网站的基本步骤 (1)分析请求:URL 规则.请求头规则.请求参数规则. (2)模拟请求:通过 Requests 库或 urllib 库来模拟请求. ( ...
    
			
    5. 
						
  5. Apache Flink 误用之痛
			
    摘要:本文根据 Flink Forward 全球在线会议 · 中文精华版整理而成,围绕着项目的开始.需求分析.开发,以及测试.上线.运维整个生命周期展开,介绍了 Apache Flink 实践中的一些 ...
    
			
    6. 
						
  6. 更灵活的边缘云原生运维：OpenYurt 单元化部署新增 Patch 特性
			
    简介: 在正文开始之前,我们先回顾一下单元化部署的概念和设计理念.在边缘计算场景下,计算节点具有很明显的地域分布属性,相同的应用可能需要部署在不同地域下的计算节点上. 作者 | 张杰(冰羽)来源 |  ...
    
			
    7. 
						
  7. [GPT] vue 的 quasar 框架 在 layout 模版中 如何获取 子页面当前使用的 useMeta
			
      在 Quasar 框架中,用 Vue Router 的 meta 字段来获取子页面当前使用的 useMeta . 首先,您需要在路由配置中设置子页面的 meta 字段.例如: const rout ...
    
			
    8. 
						
  8. 解决 System.Net.Sockets.SocketException 10106 无法加载或初始化请求的服务提供程序 无法联网
			
    本文收集 System.Net.Sockets.SocketException 异常错误码为 10106 导致无法联网的问题 这里的 10106 是 Win32 的 Socket 错误码,可以从 Wi ...
    
			
    9. 
						
  9. 深入理解 C++ 中的多态与文件操作
			
    C++ 多态 多态(Polymorphism)是面向对象编程(OOP)的核心概念之一,它允许对象在相同操作下表现出不同的行为.在 C++ 中,多态通常通过继承和虚函数来实现. 理解多态 想象一个场景, ...
    
			
    10. 
						
  10. Wordpress小技巧（一）
			
    ​★★★ Wordpress发表Post文章时,页面会出现评论框,如何禁止出现评论框.步骤如下: 一.使用wordpress的后台功能关闭文章评论依次进入"后台"-"设置 ...
    
			
    11.