Vue小案例 之 商品管理------添加商品
进行添加button，以及商品列表的创建
html:
<div class="form-btn">
<button>确认添加</button>
<button>重置信息</button> </div> </div>
<!--显示表格-->
<div class="table-warp">
<div class="title">商品列表</div>
<table border="" 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:'',name:'可乐',price:3.5,num:,type:'零食'},
{id:'',name:'GTX2080',price:,num:,type:'电子产品'},
{id:'',name:'牙刷',price:,num:,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="" 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>
实现以上商品的添加以及重置信息总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理------创建页面与部分数据</title>
<script src="../js/vue.js"></script> <script> window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico',
goods:{
id:'',
name:'',
price:'',
num:'',
type:''
},
goodsType:['零食','电子产品','生活用品'],
goodsArry:[
{id:'',name:'可乐',price:3.5,num:,type:'零食'},
{id:'',name:'GTX2080',price:,num:,type:'电子产品'},
{id:'',name:'牙刷',price:,num:,type:'生活用品'} ] },
methods:{
addGoods(){ this.goodsArry.push(this.goods);
this.goods={};
} }
});
}
</script>
<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} </style>
</head>
<body>
<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="" 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>
</html>
实现商品的添加以及重置信息
Vue小案例 之 商品管理------添加商品的更多相关文章
- Cookie小案例-----记住浏览过的商品记录
Cookie小案例------记住浏览过的商品记录 我们知道,这个功能在电商项目中非经常见.这里处理请求和页面显示都是由servlet实现,主要是为了体现cookie的作用, 实现功能例如以下: 1, ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性
实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- Vue小案例 之 商品管理------删除商品与提示
实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...
- Vue小案例 之 商品管理------为之前的页面修改样式
最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...
- Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能
一.前言 1.用vuex实现加入购物车操作 2.购物车详情页面 3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...
- Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
随机推荐
- 【Python】-NO.96.Note.2.Python -【Python 基础】
1.0.0 Summary Tittle:[Python]-NO.95.Note.1.Python -[Python 老男孩 基础]- Style:Python Series:Python Since ...
- openshift node资源限制
在oc的node配置文件中添加 ...... kubeletArguments: cgroups-per-qos: - "true" cgroup-driver: - " ...
- CentOS6.5配置MYSQL一主多从详解
一.环境 操作系统 :CentOS 6.5 数据库版本:MySQL 主机A:192.168.1.1 (Master) 从机B:192.168.1.2 (Slave) 从机B:192.168.1.3 ( ...
- ios UrlEncode与UrlDecode
url字符串中具有特殊功能的特殊字符的字符串,或者中文字符,作为参数用GET方式传递时,需要用urlencode处理一下.当然,有时作为Post参数传递,也需要urlencode处理一下. NSStr ...
- cocos2dx 3.x(打开网页webView)
#include "ui/CocosGUI.h" using namespace cocos2d::experimental::ui; WebView *webView = Web ...
- C# 图片 旋转和翻转 RotateFlip
1.Rotate90FlipX2.Rotate90FliY3.Rotate90FlipXY4.Rotate90FlipNone以上面四个为例:1是指定后接水平翻转的90度顺时针旋转,2是指定后接垂直翻 ...
- Django中的View视图讲解
Django中的View视图(view.py)是负责处理用户请求和返回响应的逻辑. 视图函数或视图简而言之就是一个python函数,它接受一个web请求并返回一个Web响应. 此响应可以是网页的HTM ...
- linux工作目录切换命令
1．pwd命令 pwd命令用于显示用户当前所处的工作目录,格式为“pwd [选项]”. 2．cd命令 cd命令用于切换工作路径,格式为“cd [目录名称]”. 这个命令应该是最常用的一个Linux命令 ...
- Python - 2. Built-in Collection Data Types
From: http://interactivepython.org/courselib/static/pythonds/Introduction/GettingStartedwithData.htm ...
- arc 092D Two Sequences
题意: 给出两个长度N相同的整数序列A和B,有N^2种方式从A中选择一个数Ai,从B中选择一个数Bj,让两个数相加,求这N^2个数的XOR,即异或. 思路: 暴力的求显然是会超时的,因为是异或,就考虑 ...