实现删除商品功能

根据索引来进行删除商品：

实现删除商品的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>

实现删除商品与提示信息

Vue小案例 之 商品管理------删除商品与提示的更多相关文章

  1. Cookie小案例-----记住浏览过的商品记录

    Cookie小案例------记住浏览过的商品记录 我们知道,这个功能在电商项目中非经常见.这里处理请求和页面显示都是由servlet实现,主要是为了体现cookie的作用, 实现功能例如以下: 1, ...

  2. Vue小案例 之 商品管理------批量删除与商品数量的调整

    通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...

  3. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

    代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...

  4. Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性

    实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...

  5. Vue小案例 之 商品管理------为之前的页面修改样式

    最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...

  6. Vue小案例 之 商品管理------添加商品

    进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...

  7. Vue小案例 之 商品管理------创建页面与部分数据

    logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...

  8. Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

    一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...

  9. Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

    一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                         ...

随机推荐

  1. MySQL高效的前提

    好硬件是数据库高效的前提,没有好硬件其他优化都是白费 高性能的CPU 主频高SQL处理的更快 3级cache大CPU计算速率更快 多线程,同时并发处理SQL 关闭NUMA并设置为最大性能模式,充分利用 ...

  2. GitHub上个最有意思的项目合集（技术清单系列）

    没有1K以上的星星都不好意思推荐给大家!林子大了,啥项目都有,这里给大家搜罗了10个Github上有趣的项目.如果你就着辣椒食用本文,一定会激动的流下泪来...... 1.一行代码没有 | 18k s ...

  3. [LeetCode] 74. Search a 2D Matrix_Medium tag: Binary Search

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  4. [xdoj] 1301&1302 数字计数 数字计数的复仇

    1.首先需要掌握二进制数的一种特性,00=0,01=1,10=2,11=3.每一个二进制的值代表他前面的二进数的个数,比如11=3,他的前面就有三个二进制的数字,不过在本题中,题目数据是1-n,故把0 ...

  5. Roslyn编译器

    概要 微软官方开源的C#/VB编译器.作为.net 2015的重要名角,负责将代码编译成IL,另外提供丰富的API用于代码分析,vs2015的实时代码分析就是使用的Roslyn提供的API. C#6. ...

  6. Selenium基本使用(十三)测试中常见问题

    我们在使用selenium测试过程中,经常会遇到这样的问题: 1.frame或iframe <iframe id='frame1' name='frame1'> <input typ ...

  7. 48.HTML---Flex 布局教程：实例篇

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  8. NHibernate初学者指南系列文章导航

    NHibernate初学者指南系列文章导航   前面的话 经过三个多周的时间,终于将这个系列完成了,谢谢大家的关注和支持,有很多不足之处还望大家包涵. 本系列参考的书籍为NHibernate 3 Be ...

  9. JS实例3

    window.setInterval("Time()",1); function Time() { var date = new Date();//当前时间函数 var n = d ...

  10. finally语句块

    finally语句块是搭配着try语句块出现的,也就说必须有try语句块才会有finally语句块,但是并不是try语句块都会搭配有finally语句块出现,我们常见的更多是try...catch.. ...