大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的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. MMDeploy部署实战系列【第二章】：mmdeploy安装及环境搭建
			
    MMDeploy部署实战系列[第二章]:mmdeploy安装及环境搭建 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就可以,我给补充. 版权声明:本文为博 ...
    
			
    2. 
						
  2. leetcode每日一题：836. 矩形重叠
			
    836. 矩形重叠 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标. 如果相交的面积为正,则称两矩形重叠.需要明确的 ...
    
			
    3. 
						
  3. 一个.NET内置依赖注入的小型强化版
			
    前言 .NET生态中有许多依赖注入容器.在大多数情况下,微软提供的内置容器在易用性和性能方面都非常优秀.外加ASP.NET Core默认使用内置容器,使用很方便. 但是笔者在使用中一直有一个头疼的问题 ...
    
			
    4. 
						
  4. 鸿蒙HarmonyOS实战-ArkUI动画（布局更新动画）
			
    前言 动画是一种通过连续展示一系列静止的图像(称为帧)来创造出运动效果的艺术形式.它可以以手绘.计算机生成或其他各种形式呈现.在动画中,每一帧都具有微小的变化,当这些帧被快速播放时,人眼会产生视觉上的 ...
    
			
    5. 
						
  5. 使用ISS服务器方式跑C#程序
			
    使用ISS服务器方式跑C#程序 VS2010,临时接了一个C#系统的小系统,需要本地调试跑一下 但是老是在conn.open提示06413,简单来说就是连接不上数据库 尝试了很多方法,最后还是决定配置 ...
    
			
    6. 
						
  6. 存储过程编写·记（“xxx“在需要下列之一：if）
			
    存储过程编写·记("xxx"在需要下列之一:if) 使用的数据库为Oracle数据库,数据库客户端为DBeaver 简单来说,就是使用SQL语句进行一些函数编写,进而进行一些过滤啊 ...
    
			
    7. 
						
  7. 力扣372(java)-超级次方（中等）
			
    题目: 你的任务是计算 ab 对 1337 取模,a 是一个正整数,b 是一个非常大的正整数且会以数组形式给出. 示例 1: 输入:a = 2, b = [3]输出:8示例 2: 输入:a = 2,  ...
    
			
    8. 
						
  8. 【ModelScope】5分钟让你在大火的多模态领域权威榜单VQA上超越人类
			
    简介: ModelScope上开源了达摩院众多业界最强多模态模型,其中就有首超人类的多模态视觉问答模型mPLUG,小编从页面体验(一探).开发体验(二探).开放测试(三探)来探究多模态预训练模型能力. ...
    
			
    9. 
						
  9. Fluid 给数据弹性一双隐形的翅膀 -- 自定义弹性伸缩
			
    简介: 弹性伸缩作为 Kubernetes 的核心能力之一,但它一直是围绕这无状态的应用负载展开.而 Fluid 提供了分布式缓存的弹性伸缩能力,可以灵活扩充和收缩数据缓存. 它基于 Runtime  ...
    
			
    10. 
						
  10. [Go] 浅谈 Golang struct 与 PHP class 的相似
			
    Golang 中的 struct 与 PHP 的 class 在使用方式上差不多. struct 中的成员可以类比 class 中的属性,struct 中的成员函数可以类比 class 中的方法. 对 ...
    
			
    11.