Vue_(基础)商品管理-demo
实现对商品的增加、删除、数量的修改功能
删除商品可选择直接删除当前商品、删除选中商品、删除所有商品
添加商品时会自动添加日期字段
商品的属性
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
addDate : ''
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
addDate : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8,
delArray:[] //删除选中的索引
},
methods : {
addGoods(){
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth()+1;
var day =d.getDate()<10?'0'+d.getDate() : d.getDate();
var myDate = y+ '-' + m +'-'+day; this.goods.addDate = myDate ;
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
},
delSelected(){
this.delArray.sort((a, b)=>{
return a - b;
}); for(var i=0; i<this.delArray.length; i++){
this.goodsArray.splice(this.delArray[i] - i, 1);
}
this.delArray = [];
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>入库日期</th>
<th>删除</th>
<th>选择</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td style="display: flex;">
<a style="flex: 0.5;" href="#" @click.prevent="item.num = item.num-- <= 0 ? 0 : item.num--">-</a>
{{item.num}}
<a style="flex: 0.5;" href="#" @click.prevent="item.num++">+</a>
</td> <td>{{item.type}}</td>
<td>{{item.addDate }}</td>
<td>
<button @click="delGoods(index)">删除</button>
</td>
<td>
<input type="checkbox" :value="index" v-model="delArray"/>
</td>
</tr>
</table>
</div>
<div class="clear-btn">
<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中</a>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
</div>
</div>
</body>
</html>
Gary_VueShop.html
Learn
一、创建页面与部分属性
二、添加商品
三、给项目添加样式
四、删除商品与提示
五、删除用户选中商品
六、修改商品数量 增加入库信息属性
项目结构
一、创建页面与部分属性
商品头部数据域
data : {
imgUrl : '../res/images/',
imgName : 'logo.png'
}
商品头部样式
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png'
},
methods : { }
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
} </style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<!--显示 表格-->
<div class="table-wrap"></div>
</div>
</body>
</html>
Gary_VueShop.html
添加商品的部分属性
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
},
goodsType : ['零食', '电子产品', '生活用品']
}
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
},
goodsType : ['零食', '电子产品', '生活用品']
}
methods : { }
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
} </style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<!--显示 表格-->
<div class="table-wrap"></div>
</div>
</body>
</html>
Gary_VueShop.html
二、添加商品
在Vue数据域中添加商品实例
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
在body中添加列出商品详情
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
]
},
methods : { }
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
} </style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button>确认添加</button>
<button>重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<div class="title">商品列表</div>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
</div>
</body>
</html>
Gary_VueShop.html
给"确认添加"和"重置信息"绑定事件响应
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
}
}
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
]
},
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
} </style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<div class="title">商品列表</div>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
</div>
</body>
</html>
Gary_VueShop.html
三、给项目添加样式
直接在<style type="text/css"></style>中为项目添加样式
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
]
},
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<div class="title">商品列表</div>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
</div>
</body>
</html>
Gary_VueShop.html
四、删除商品与提示
添加删除商品button放入表单个中
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</table>
添加清空全部商品按钮点击控件
使用@click.prevent可以阻止删除<a>标签默认跳转事件，使用v-show="goodsArray.length > 0判断当商品个数大于0的时候才将次链接显示出来
<div>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
添加绑定删除单个商品和全部商品的函数
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8
},
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</table>
</div>
<div>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
</div>
</div>
</body>
</html>
Gary_VueShop.html
五、删除用户选中商品
使用input来存放选中商品的索引
在Vue数据域中添加delArray数据
delArray:[] //删除选中的索引
<td>
<input type="checkbox" :value="index" v-model="delArray"/>
</td>
{{delArray}}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8,
delArray:[] //删除选中的索引
},
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
<th>选择</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
<td>
<input type="checkbox" :value="index" v-model="delArray"/>
</td>
{{delArray}}
</tr>
</table>
</div>
<div>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
</div>
</div>
</body>
</html>
Gary_VueShop.html
为方便点击清空全部与删除选中索引，可以把清空全部按钮放置在右下角
添加选中商品链接
<div class="clear-btn">
<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中</a>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
delSelected(){
this.delArray.sort((a, b)=>{
return a - b;
});
for(var i=0; i<this.delArray.length; i++){
this.goodsArray.splice(this.delArray[i] - i, 1);
}
this.delArray = [];
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8,
delArray:[] //删除选中的索引
},
methods : {
addGoods(){
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
},
delSelected(){
this.delArray.sort((a, b)=>{
return a - b;
}); for(var i=0; i<this.delArray.length; i++){
this.goodsArray.splice(this.delArray[i] - i, 1);
}
this.delArray = [];
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
<th>选择</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
<td>
<input type="checkbox" :value="index" v-model="delArray"/>
</td>
{{delArray}}
</tr>
</table>
</div>
<div class="clear-btn">
<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中</a>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
</div>
</div>
</body>
</html>
Gary_VueShop.html
六、修改商品数量 增加入库信息属性
直接使用@click.prevent对商品数量的修改
<td style="display: flex;">
<a style="flex: 0.5;" href="#" @click.prevent="item.num = item.num-- <= 0 ? 0 : item.num--">-</a>
{{item.num}}
<a style="flex: 0.5;" href="#" @click.prevent="item.num++">+</a>
</td>
添加商品日期字段
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
addDate : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8,
delArray:[] //删除选中的索引
}
将商品信息字段添加进表格当中
<th>入库日期</th>
<td>{{item.addDate }}</td>
修改增加商品addGoods()函数
addGoods(){
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth()+1;
var day =d.getDate()<10?'0'+d.getDate() : d.getDate();
var myDate = y+ '-' + m +'-'+day;
this.goods.addDate = myDate ;
this.goodsArray.push(this.goods);
this.goods = {};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary商品管理</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
let vm = new Vue({
el : '.container',
data : {
imgUrl : '../res/images/',
imgName : 'logo.png',
goods : {
id : '',
name : '',
price : '',
num : '',
type : '',
addDate : ''
},
goodsType : ['零食', '电子产品', '生活用品'],
goodsArray : [
{id : '001', name : '可乐', price : 10, num : 10, type : '零食', addDate : '2019-02-23'},
{id : '002', name : '手机', price : 1000, num : 20, type : '电子产品', addDate : '2019-02-24'},
{id : '003', name : '毛巾', price : 5, num : 30, type : '生活用品', addDate : '2019-02-25'}
],
colNum : 8,
delArray:[] //删除选中的索引
},
methods : {
addGoods(){
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth()+1;
var day =d.getDate()<10?'0'+d.getDate() : d.getDate();
var myDate = y+ '-' + m +'-'+day; this.goods.addDate = myDate ;
this.goodsArray.push(this.goods);
this.goods = {};
},
delGoods(index){
this.goodsArray.splice(index, 1);
},
clearGoodsArray(){
this.goodsArray = [];
},
delSelected(){
this.delArray.sort((a, b)=>{
return a - b;
}); for(var i=0; i<this.delArray.length; i++){
this.goodsArray.splice(this.delArray[i] - i, 1);
}
this.delArray = [];
}
}
});
}
</script>
<style type="text/css">
.container{
margin: 0 auto;
text-align: center;
width: 1000px;
border: 2px solid gray;
}
.header{
margin: 10px;
border: 1px solid gray;
}
.header .title{
color: rgb(53, 73, 93);
background: rgb(65, 184, 131);
}
.logo{
position: relative;
top: 12px;
} .form-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.form-warp .content{
line-height: 35px;
}
.form-warp input{
width: 150px;
height: 18px;
}
.form-warp select{
width: 154px;
height: 24px;
} .sub-title{
color: rgb(65, 184, 131);
background: rgb(53, 73, 93);
} .table-warp{
margin: 10px;
padding-bottom: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #FFF;
background-color: rgb(53, 73, 93);
}
.table-warp a{
text-decoration: none;
}
.clear-btn{
text-align: right;
padding-right: 10px;
}
.fontColor{
color: gray;
}
.myBackgounrdColor{
background: rgb(65, 184, 131);
}
.myFontSize{
font-size: 200px;
}
</style>
</head>
<body>
<div class="container">
<!--有logo和title-->
<div class="header">
<img :src="imgUrl + imgName" class="logo" height="80px" />
<h1 class="title">Gary_商品管理</h1>
</div>
<!--输入部分input-->
<div class="form-warp"></div>
<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=""> -- 选择商品类型 --</option>
<option v-for="type in goodsType">{{type}}</option>
</select>
</div>
<div class="form-btn"></div>
<button @click="addGoods">确认添加</button>
<button @click="goods = {}">重置信息</button>
<!--显示 表格-->
<div class="table-wrap">
<h2 :class="{fontColor : goodsArray.length <= 0}" class="sub-title">商品列表</h2>
<div class="content">
<table border="1" align="center" cellspacing="" cellpadding="">
<tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>入库日期</th>
<th>删除</th>
<th>选择</th>
</tr>
<tr>
<td :colspan="colNum" height="150px" v-show="goodsArray.length <= 0">暂无商品</td>
</tr>
<tr v-for="(item, index) in goodsArray" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td style="display: flex;">
<a style="flex: 0.5;" href="#" @click.prevent="item.num = item.num-- <= 0 ? 0 : item.num--">-</a>
{{item.num}}
<a style="flex: 0.5;" href="#" @click.prevent="item.num++">+</a>
</td> <td>{{item.type}}</td>
<td>{{item.addDate }}</td>
<td>
<button @click="delGoods(index)">删除</button>
</td>
<td>
<input type="checkbox" :value="index" v-model="delArray"/>
</td>
</tr>
</table>
</div>
<div class="clear-btn">
<a href="#" @click.prevent="delSelected" v-show="delArray.length > 0">删除选中</a>
<a href="#" @click.prevent="clearGoodsArray" v-show="goodsArray.length > 0">清空全部</a>
</div>
</div>
</div>
</body>
</html>
Gary_VueShop.html
Vue_(基础)商品管理-demo的更多相关文章
- Super超级ERP系统---(3)基础信息管理--商品管理
商品管理主要包括商品的添加,修改,维护商品所在分类,单位,供应商,品牌,名称,价格,尺寸,规格等属性的维护. 1.商品添加 2.商品列表展示 商品列表界面左侧商品分类,右侧是商品信息
- C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试
在上篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及对应的对象模型,本篇继续微信小店的主题,介绍其中API接口的封装和测试使用.微信小店的相 ...
- SQL Server 【附】创建"商品管理数据库"、"学生选课数据库"的SQL语句
附:(创建“商品管理数据库”的SQL语句) --建立"商品管理数据库"数据库-- create database 商品管理数据库 on(name='商品管理数据库_m', file ...
- mvc 权限管理 demo
http://blog.csdn.net/zht666/article/details/8529646 new http://www.cnblogs.com/fengxing/archive/2012 ...
- vue实现图书管理demo
年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- 【一起学源码-微服务】Hystrix 源码一：Hystrix基础原理与Demo搭建
说明 原创不易,如若转载 请标明来源! 欢迎关注本人微信公众号:壹枝花算不算浪漫 更多内容也可查看本人博客:一枝花算不算浪漫 前言 前情回顾 上一个系列文章讲解了Feign的源码,主要是Feign动态 ...
- 「超市管理系统——商品管理」 · Java Swing + MySQL JDBC开发
项目下载:https://download.csdn.net/download/weixin_44893902/13715024 1.9元付费赞助下载:https://download.csdn.ne ...
- EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...
随机推荐
- 你不知道的css各类布局（三）之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- 题解 P2879 【[USACO07JAN]区间统计Tallest Cow】
题目链接: https://www.luogu.org/problemnew/show/P2879 思路: 先不管最大高度,我们读入一对x,y.说明,x+1~y-1之间牛的身高都小于x,y. 然后不妨 ...
- JavaScript内置排序方法sort实现排序操作
var arr = [10,8,6,9,1,7,2,13,5,1,9]; //sort排序 arr.sort(function(a,b){ //可以改变数组本身的排序方法 return a-b; }) ...
- 小白进阶之Scrapy第六篇Scrapy-Redis详解（转）
Scrapy-Redis 详解 通常我们在一个站站点进行采集的时候,如果是小站的话 我们使用scrapy本身就可以满足. 但是如果在面对一些比较大型的站点的时候,单个scrapy就显得力不从心了. 要 ...
- Windows defender怎么才能彻底关闭？
据不久前的一项测试表明,Windows系统自带的Windows defender软件在所有参与测试的杀毒安全软件中对win10的运行速度影响最大. 而Win10系统的Windows defender会 ...
- vue项目图标
项目图标iconfont 网址:http://www.iconfont.cn
- 【转】Linux设置和查看环境变量的方法
转: http://www.jb51.net/LINUXjishu/77524.html 1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量 ...
- 用Python+Aria2写一个自动选择最优下载方式的E站爬虫
前言 E站爬虫在网上已经有很多了,但多数都只能以图片为单位下载,且偶尔会遇到图片加载失败的情况:熟悉E站的朋友们应该知道,E站许多资源都是有提供BT种子的,而且通常打包的是比默认看图模式更高清的文件: ...
- ngnix 配置说明
#定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes ; # #全局错误日志定义类型,[ debug ...
- 安装docker fastdfs
# step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2# Step 2: 添加软件 ...