Vue学习笔记03(商品列表添加与删除)

最新推荐文章于 2024-07-09 21:18:14 发布
最新推荐文章于 2024-07-09 21:18:14 发布
阅读量838 收藏 5
点赞数 2
分类专栏： Vue 文章标签： vue vue.js javascript bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/snacy/article/details/109172210
版权

ps:本案例有用到boostrap.css

1、首先搭建好网页页面

  • 1.1、一个标题
<div class="panel-heading">
	<h3 class="panel-title">商品列表</h3>
</div>
  • 1.2、再两个输入框输入商品信息
<div class="panel-body form-inline">
   				id: <input type="text" class="form-control" v-model="id" />
   				name: <input type="text" class="form-control" v-model="NAME" />
   				<input type="button" value="添加" class="btn btn-primary" @click="add" />
</div>

ps: 类 panel-heading   panel-title   panel-body form-inline 等均为boostrap的样式类
  • 1.3、页面顶部完整代码：
<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">商品列表</h3>
				</div>
				<div class="panel-body form-inline">
					id: <input type="text" class="form-control" v-model="id" />
					name: <input type="text" class="form-control" v-model="NAME" />
					<input type="button" value="添加" class="btn btn-primary" @click="add" />
				</div>
</div>
  • 1.4、在顶部部分下面添加一个表格，同时在data里定义一个数组，存放商品信息，再定义代表商品信息的遍历，然后再在表格里用v-for遍历商品信息
<table class="table table-bordered table-hover table-striped">
				
				<thead>
					<tr>
						<th>id</th>
						<th>NAME</th>
						<th>CTIME</th>
						<th>OPERATION</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.NAME}}</td>
						<td>{{item.CTIME}}</td>
						<td><a @click.prevent="del(item.id)">删除</a></td>  <!-- prevent清除a链接的默认行为 -->
					</tr>
				</tbody>
			</table>

ps：要注意的是，Vue2.0版本之后v-for必须要设置key的属性

  • 1.5、HTML部分完整代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>品牌列表的添加与删除</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* #banner{
				width: 100%;
				height: 50px;
				background-color: cadetblue;
				text-align: left;
				line-height: 50px;
				text-indent: 2em;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div id="banner">
				商品列表
			</div> -->
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">商品列表</h3>
				</div>
				<div class="panel-body form-inline">
					id: <input type="text" class="form-control" v-model="id" />
					name: <input type="text" class="form-control" v-model="NAME" />
					<input type="button" value="添加" class="btn btn-primary" @click="add" />
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped">
				
				<thead>
					<tr>
						<th>id</th>
						<th>NAME</th>
						<th>CTIME</th>
						<th>OPERATION</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.NAME}}</td>
						<td>{{item.CTIME}}</td>
						<td><a @click.prevent="del(item.id)">删除</a></td>  <!-- prevent清除a链接的默认行为 -->
					</tr>
				</tbody>
			</table>
		</div>
	</body>
  • 1.6、页面部分效果
    在这里插入图片描述

2、Vue实例部分

2.1、data部分代码

data:{
				id:'',
				NAME:'',
				CTIME:'',
				list:[
					{id:1,NAME:'奔驰',CTIME:new Date()},
					{id:2,NAME:'宝马',CTIME:new Date()},
					{id:3,NAME:'法拉利',CTIME:new Date()},
					{id:4,NAME:'劳斯莱斯',CTIME:new Date()},
					{id:5,NAME:'四驱车',CTIME:new Date()},
				]
			},

2.2、给添加按钮绑定add()方法，给删除按钮添加del()方法

  • 2.2.1、add()方法
    • 首先判断输入信息是否为空
    if(this.id==''||this.name==""){
   				console.log("商品信息不能为空")
   				return false;
   			}
    • 然后定义一个变量保存输入的信息
    //获取要输入的商品的内容
var car = {id:this.id,NAME:this.NAME,CTIME:new Date()};
    • 然后把保存的信息插入list数组
    //插入列表数组
   			this.list.push(car);
    • 最后清空输入量
    //清空输入框
   			this.id=this.NAME='';
  • 2.2.2 、del()方法
    • 根据所点击的删除按钮的id来获取是哪一行的删除被点击了，所以del()方法要传入一个参数item.id
    <td><a @click.prevent="del(item.id)">删除</a></td>
    • 然后判断传入的id匹配的是哪个信息的id，然后将 相对应的id商品信息删除
    this.list.some((item,i)=>{
   				if(item.id==id){
   					this.list.splice(i,1);
   					return true;
   				}
   			})

2.3、方法部分完整代码

methods:{
				add(){
					if(this.id==''||this.name==""){
						console.log("商品信息不能为空")
						return false;
					}
					console.log("商品添加成功！");
					//获取要输入的商品的内容
					var car = {id:this.id,NAME:this.NAME,CTIME:new Date()};
					//插入列表数组
					this.list.push(car);
					//清空输入框
					this.id=this.NAME='';
					
				},
				del(id){  //更具id删除商品信息
					this.list.some((item,i)=>{
						if(item.id==id){
							this.list.splice(i,1);
							return true;
						}
					})
				}
			}

3、项目完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>品牌列表的添加与删除</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* #banner{
				width: 100%;
				height: 50px;
				background-color: cadetblue;
				text-align: left;
				line-height: 50px;
				text-indent: 2em;
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div id="banner">
				商品列表
			</div> -->
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">商品列表</h3>
				</div>
				<div class="panel-body form-inline">
					id: <input type="text" class="form-control" v-model="id" />
					name: <input type="text" class="form-control" v-model="NAME" />
					<input type="button" value="添加" class="btn btn-primary" @click="add" />
				</div>
			</div>
			<table class="table table-bordered table-hover table-striped">
				
				<thead>
					<tr>
						<th>id</th>
						<th>NAME</th>
						<th>CTIME</th>
						<th>OPERATION</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.NAME}}</td>
						<td>{{item.CTIME}}</td>
						<td><a @click.prevent="del(item.id)">删除</a></td>  <!-- prevent清除a链接的默认行为 -->
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				id:'',
				NAME:'',
				CTIME:'',
				list:[
					{id:1,NAME:'奔驰',CTIME:new Date()},
					{id:2,NAME:'宝马',CTIME:new Date()},
					{id:3,NAME:'法拉利',CTIME:new Date()},
					{id:4,NAME:'劳斯莱斯',CTIME:new Date()},
					{id:5,NAME:'四驱车',CTIME:new Date()},
				]
			},
			methods:{
				add(){
					if(this.id==''||this.name==""){
						console.log("商品信息不能为空")
						return false;
					}
					console.log("商品添加成功！");
					//获取要输入的商品的内容
					var car = {id:this.id,NAME:this.NAME,CTIME:new Date()};
					//插入列表数组
					this.list.push(car);
					//清空输入框
					this.id=this.NAME='';
					
				},
				del(id){  //更具id删除商品信息
					this.list.some((item,i)=>{
						if(item.id==id){
							this.list.splice(i,1);
							return true;
						}
					})
				}
			}
		})
	</script>
</html>

4、最终效果

在这里插入图片描述

snacy
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 实现商品列表的添加、删除，搜索
qq_43156442的博客
06-15 771
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vie...
vue实现商品列表的添加删除实例讲解
10-15
在本篇内容里小编给大家分享的是关于vue实现商品列表的添加删除实例讲解，有兴趣的朋友们可以参考下。
【Vue.js】实现商品添加、列表展示和删除商品
qq_37086980的博客
01-20 2937
【Vue.js】实现商品添加、列表展示和删除商品 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Management</title>
使用 vue实现商品 列表的添加删除
hfdxmz_3的博客
05-14 1112
1 <div id="app"> 2 <div class="container"><form class="form-inline"> 3 <div class="form-group"><label for="exampleInputName2">ID：</label> <input id="exampleInputName2" class="form-control" type="text" /></di..
Vue.js 实现简易购物车（商品的增加删除，价格的小计和总计）
weixin_45026839的博客
07-13 3277
使用方法 ： toFixed(2) 保留俩位小数 splice(index,howmany) 删除商品 index 规定添加删除的位置 ，howmany 删除几个 border-collapse: collapse; 边界折叠： 折叠 border-spacing: 0; 边框间距 0 html 代码 <div id="app"> <div v-if='books.length'> <table> <thead>.
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
Vue学习笔记进阶篇之单元素过度
08-29
Vue学习笔记进阶篇之单元素过度 本文主要介绍了Vue学习笔记进阶篇之单元素过度，主要涉及到Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果，包括在CSS过渡和动画中自动应用class、使用第三方CSS...
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
Vue笔记个人课程.zip
08-28
- **Vue Transition**：Vue提供了内置的过渡系统，可以为组件的插入、更新和删除添加过渡效果。 9. **单元测试** - **Jest**或**Mocha**：Vue应用通常使用这些测试框架进行单元测试，确保代码质量。 通过这个...
vue2.0实现列表数据增加和删除
10-15
主要为大家详细介绍了vue2.0实现列表数据增加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
4. **购物车功能**: 实现添加、删除商品，以及数量增减等购物车功能，涉及到组件间通信。 5. **响应式设计**: 使用CSS Flexbox或Grid布局，实现跨平台、响应式的电商界面。 6. **表单处理**: 学习如何使用`v-model...
每日一练09：VUE编写简易添加商品和删除商品功能
Super Livia
11-21 437
效果如下： 说明： 利用goods.length获取物品全部数量 利用循环把物品循环出来 this.goods.splice(idx, 1)删除当前商品 用for (var i in this.goods) {if (this.goods[i].name == name) {return;}}去重 为了避免传递进去的name值有空格，我们这里使用name.trim()，...
vue商品添加和删除
qq_52474756的博客
03-22 916
vue实现商品的添加和删除
商品管理系统商品分类增删改查前后端实现
实践求真知
10-26 2951
一前端实现 1category.vue <template> <div> <!-- 拖拽功能 draggable：拖拽开关 active-text：功能开启时显示字样 inactive-text：功能关闭时显示字样 --> <el-switch v-model="draggable" active-text="开启拖拽" inactive-t..
电商后台管理4-商品列表及添加商品(list.vue和add.vue)
ljyahaha的博客
04-01 3182
1、商品列表页面 商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图： 基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。 首先在main.js中注册了全局过滤器（以下出自vue.js官网） Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达
vue项目实现添加，修改、删除效果
热门推荐
yycnf的博客
08-31 1万+
使用vue实现以下效果： 1、创建vue项目 vue create libary 2、cd libary 进入libary文件 3、下载需要用到的模块（这里用的是element-ui） cnpm i element- ui --save 4、启动项目 npm run serve 5、配置main.js文件 import ElementUi from "element-ui";//引入element-ui模块 import "element-ui/lib/theme-cha...
vue动态添加表单数据至表格中
weixin_52568554的博客
04-14 9734
vue动态添加表单数据至表格中 <div> <el-card> <div slot="header" class="tm"> <span>报废信息</span> </div> <!-- 表单 --> <!-- 时间设置 -->
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
最新发布
口袋的天空的博客
07-09 912
vue切换主题
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、指令等。 2. 组件化开发：学习如何创建和使用Vue组件，掌握组件之间的通信方式，包括props和事件。 3. 路由管理：学习使用Vue Router实现前端路由，实现单页应用的页面跳转和导航。 4. 状态管理：掌握Vuex的使用，实现全局状态管理和数据共享。 5. 表单处理：学习如何使用Vue表单指令和表单验证，处理用户输入和表单提交。 6. HTTP请求：了解Vue中常用的HTTP库，如axios，进行数据的异步请求和处理。 7. 生命周期：理解Vue生命周期钩子函数的执行顺序和作用，掌握组件的生命周期管理。 8. Vue3新特性：了解Vue3的新特性，如Composition API、Teleport、Fragments等。 尚硅谷还提供了一些实战项目，如电商平台、博客系统等，可以通过完成这些项目来巩固所学的知识。 以上是一些关于尚硅谷Vue学习笔记的要点，希望对你有所帮助！如果有更具体的问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值