实现删除商品功能
根据索引来进行删除商品：
实现删除商品的HTML：
<!--显示表格-->
<div class="table-warp">
<div class="sub_title">商品列表</div>
<table border="" align="center"> <tr>
<th>序号</th>
<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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</table> <div class="clear-btn"> <a href="#" @click="clearGoodsArry" >清空全部</a>
</div> </div>
实现删除商品的vue：
methods:{
addGoods(){
this.goodsArry.push(this.goods);
this.goods={};
},
delGoods(index){
this.goodsArry.splice(index,);
},
clearGoodsArry(){
this.goodsArry=[];
},
}
});
}
实现删除商品后提示信息的显示：
实现提示信息的HTML：
<!--显示表格-->
<div class="table-warp">
<div :class="{fontColor:goodsArry.length<=0}" class="sub_title">商品列表</div>
<table border="" align="center"> <tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
</tr>
<td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
暂无商品
</td>
<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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</table> <div class="clear-btn"> <a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
</div> </div>
商品列表中如果没有商品“商品列表”四个字就会由绿色变为灰色，通过v-bind绑定样式来通过json方式实现：
<div :class="{fontColor:goodsArry.length<=0}" class="sub_title">商品列表</div>
其fontColor的css：
.fontColor{
color: gray;
text-align: center;
}
如果商品列表中无数据的话，就会合并7列，并且显示暂无商品的提示，该数量7在vue代码中进行定义变量属性值，使用时在HTML通过v-bind来进行绑定该属性：
<td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
暂无商品
</td>
在vue中定义的变量colNum:
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:'生活用品'}
],
colNum:
},
a标签中的清空全部，如果商品列表中没有数据就不显示这几个字，如果有数据则会显示出来：
<a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
实现删除商品与提示信息的总代码：
<!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:'生活用品'} ],
colNum: },
methods:{
addGoods(){ this.goodsArry.push(this.goods);
this.goods={};
},
delGoods(index){ this.goodsArry.splice(index,);
},
clearGoodsArry(){ this.goodsArry=[];
}, }
});
}
</script>
<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} .header{ margin: 10px;
border: 1px solid gray;
} .header .title{ color: rgb(,,);
background: rgb(,,);
}
.sub_title{
background:rgb(,,);
color: rgb(,,);
font-size: 30px;
}
.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;
} .table-warp{
padding-bottom: 10px;
margin: 10px;
border: 1px solid gray;
}
.table-warp th{
width: 80px;
color: #ffff;
background: rgb(,,);
} .logo
{
position: relative;
top: 12px;
}
.fontColor{ color: gray;
text-align: center;
} </style>
</head>
<body>
<div id="container"> <!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="80px" width="100px" />
<h1 class="title">商品管理</h1> </div> <!--输入部分input-->
<div class="form-warp">
<div class="sub_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="{fontColor:goodsArry.length<=0}" class="sub_title">商品列表</div>
<table border="" align="center"> <tr>
<th>序号</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>类型</th>
<th>删除</th>
</tr>
<td :colspan="colNum" height="150px" v-show="goodsArry.length<=0">
暂无商品
</td>
<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>
<td>
<button @click="delGoods(index)">删除</button>
</td>
</tr>
</table> <div class="clear-btn"> <a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>
</div> </div> </div>
</body>
</html>
实现删除商品与提示信息