Vue小案例 之 商品管理------添加商品
2024-06-06 15:54:48
进行添加button，以及商品列表的创建
html:
<div class="form-btn"><button>确认添加</button><button>重置信息</button></div></div><!--显示表格--><div class="table-warp"><div class="title">商品列表</div><table border="1" align="center"><tr><th>序号</th><th>编号</th><th>名称</th><th>价格</th><th>数量</th><th>类型</th></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div>
在vue代码中创建方法，以及创建假数据,进行对两个button事件处理：
添加的vue代码：
<script>window .onload= () =>{new Vue({el:"#container",data:{imgUrl:'../res/images/',imgName:'lovely.ico',goods:{id:'',name:'',price:'',num:'',type:''},goodsType:['零食','电子产品','生活用品'],goodsArry:[{id:'001',name:'可乐',price:3.5,num:10,type:'零食'},{id:'002',name:'GTX2080',price:9999,num:20,type:'电子产品'},{id:'003',name:'牙刷',price:5,num:30,type:'生活用品'}]},methods:{addGoods(){this.goodsArry.push(this.goods);this.goods={};}}});}</script>this.goods={}; 表示点击完确认添加按钮，添加商品中的数据清空
html:
<div id="container"><!--logo title--><div class="header"><img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/><h1 class="title">商品管理</h1></div><!--输入部分input--><div class="form-warp"><div class="title">添加商品</div><div class="content">商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />商品类型：<select v-model="goods.type"><option value="" disabled="disabled">--请选择--</option><option v-for="type in goodsType">{{type}}</option></select></div><div class="form-btn"><button @click="addGoods">确认添加</button><button @click="goods= { } ">重置信息</button></div></div><!--显示表格--><div class="table-warp"><div class="title">商品列表</div><table border="1" align="center"><tr><th>序号</th><th>编号</th><th>名称</th><th>价格</th><th>数量</th><th>类型</th></tr><tr v-for="(item,index) in goodsArry" :key="item.id"><td>{{index}}</td><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.num}}</td><td>{{item.type}}</td></tr></table></div></div></body>实现以上商品的添加以及重置信息总的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>商品管理------创建页面与部分数据</title>
6 <script src="../js/vue.js"></script>
7
8 <script>
9
10
11 window .οnlοad= () =>{
12 new Vue({
13 el:"#container",
14 data:{
15 imgUrl:'../res/images/',
16 imgName:'lovely.ico',
17 goods:{
18 id:'',
19 name:'',
20 price:'',
21 num:'',
22 type:''
23 },
24 goodsType:['零食','电子产品','生活用品'],
25 goodsArry:[
26 {id:'001',name:'可乐',price:3.5,num:10,type:'零食'},
27 {id:'002',name:'GTX2080',price:9999,num:20,type:'电子产品'},
28 {id:'003',name:'牙刷',price:5,num:30,type:'生活用品'}
29
30 ]
31
32
33
34 },
35 methods:{
36 addGoods(){
37
38 this.goodsArry.push(this.goods);
39 this.goods={};
40 }
41
42
43 }
44 });
45 }
46 </script>
47 <style>
48 #container{
49 margin: 0 auto;
50 text-align: center;
51 width: 1000px;
52 border:2px solid gray;
53 }
54
55
56 </style>
57 </head>
58 <body>
59 <div id="container">
60
61 <!--logo title-->
62 <div class="header">
63 <img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/>
64 <h1 class="title">商品管理</h1>
65
66 </div>
67
68 <!--输入部分input-->
69 <div class="form-warp">
70 <div class="title">添加商品</div>
71 <div class="content">
72
73 商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
74 商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
75 商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
76 商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
77 商品类型：<select v-model="goods.type">
78
79 <option value="" disabled="disabled">--请选择--</option>
80 <option v-for="type in goodsType">{{type}}</option>
81
82 </select>
83
84 </div>
85 <div class="form-btn">
86 <button @click="addGoods">确认添加</button>
87 <button @click="goods= { } ">重置信息</button>
88
89
90
91 </div>
92
93 </div>
94 <!--显示表格-->
95 <div class="table-warp">
96 <div class="title">商品列表</div>
97 <table border="1" align="center">
98
99 <tr>
100 <th>序号</th>
101 <th>编号</th>
102 <th>名称</th>
103 <th>价格</th>
104 <th>数量</th>
105 <th>类型</th>
106 </tr>
107 <tr v-for="(item,index) in goodsArry" :key="item.id">
108 <td>{{index}}</td>
109 <td>{{item.id}}</td>
110 <td>{{item.name}}</td>
111 <td>{{item.price}}</td>
112 <td>{{item.num}}</td>
113 <td>{{item.type}}</td>
114 </tr>
115 </table>
116
117
118
119
120
121 </div>
122
123
124
125
126 </div>
127 </body>
128 </html>实现商品的添加以及重置信息
转载于:https://www.cnblogs.com/jiguiyan/p/10705378.html
Vue小案例 之 商品管理------添加商品相关推荐
- shopxo二次开发：商品管理添加、商品导入库存、设置库存量（教程）
shopxo二次开发:商品添加与库存设置(教程如下) 商品添加与库存设置的一系列的操作说明: 步骤 · 如下: 商品添加与库存设置的一系列的操作说明: 商品管理.商品添加.商品类型设置.商品导入库存. ...
- vue小案例（小黑记事本和购物车）
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- 后台管理系统、商品管理、商品发布、商品回收、订单管理、退款管理、运营管理、商城设置、导航分类、营销管理、优惠券套餐、数据统计、活跃用户、数据埋点、财务管理、对账单、财务数据、账户资产、电商后台
后台管理系统.商品管理.商品发布.商品回收.订单管理.退款管理.运营管理.商城设置.导航分类.营销管理.优惠券套餐.数据统计.活跃用户.数据埋点.财务管理.对账单.财务数据.账户资产.账号管理.电商后 ...
- 一个可以添加商品、查询商品的程序，登录成功的话，再去操作，添加、查询商品，添加商品也是写在文件里面...
#写一个可以添加商品.查询商品的这么程序#1.先登录,登录的用户名和密码都是写在文件里面的#1.读文件.字符串分割#2.登录成功的话,再去操作,添加.查询商品,添加商品也是写在文件里面#1.读写文件, ...
- Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
- 分析初识vue小案例
前言 我们已经写好了一个案例:初识vue小案例 接下来我们就分析初识vue小案例 容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多 下面是一个一个容器对多个 ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"><!--logo title--><div class= ...
- php 商品模块添加商品属性,添加新商品
进入添加商品页后,如图1,2 添加新商品 图1 图2 促销价格前台表现 图3 图4 图5 附加价格前台表现 图6 添加新商品 图7 配件和关联商品前台表现形式 图8 图9 通用信息商品分类:商品分类是 ...
- 淘宝店铺商品管理解决方案-商品SKU信息获取和修改oAuth2.0接口接入解决方案
商品管理对接方案: 从店铺宝贝管理场景出发,提供涵盖了宝贝主图.标题.属性信息.详情页海报等各个模块高效处理/优化的功能.并通过提供批量修改.自动补库存.定时上架.库存预警等功能帮助商家提高店铺经营效 ...
最新文章
- RESTful Levels HATEOAS
- 2019春第六周作业Compile Summarize
- 【SpringBoot专题】监控健康状况
- ajax简单的验证,ajax初探--实现简单实时验证(示例代码)
- Oracle命令（二）：Oracle数据库几种启动和关闭方式
- 人工智能-机器学习之Selenium(chrome驱动，火狐驱动)
- 新来个专家吐槽我们：连qps都不懂，靠谱吗？
- mysql解压版超详细安装以及各种避坑指南
- [Hive]Hive常用的优化方法
- c++模板函数实例化的偏序机制
- OEM 13c 监控RAC部署
- 什么是k近邻算法，K近邻算法：Fackbook最近入住预测
- JAVA项目答辩题之参考_Java项目答辩
- 佰维存储通过注册：拟募资8亿 国家集成电路基金是二股东
- win10升级助手_win7怎么升级win10？腾讯电脑管家升级win10教程
- 【python--爬虫】千图网高清背景图片
- java 压缩图片时候加水印
- c语言读取jpg字节,JPG图片C语言解码显示例子-期末倾情奉献
- 2021年全网最详细的计算机二级备考攻略,看完都会过~
- 服务器防火墙软件 —— iptables
热门文章
- 真正的研发之路（1）
- ak和sk怎么认证 海康威视_“海康威视”也遭遇美断供了？董事长陈宗年回应：正在消化这一信息...
- tarfile读文件python_Python中使用tarfile压缩、解压tar归档文件示例
- python画数学函数_Python 绘制你想要的数学函数图形 ！
- inno setup安装之前关闭mysql_innosetup安装之前关闭进程
- access根据所属院系修改学号_2012年计算机等考二级Access模拟试题四
- java 构建者模式_Java不可变类–构建器模式
- Mozilla FireFox 2.0 简体中文版发布
- Java入门系列-24-实现网络通信
- React Native组件（四）TextInput组件解析