实现修改商品的数量：

加入的代码：

css:

.clear-btn{

  text-align: right;

  padding-right: 10px;

}

.table-warp a{

 text-decoration: none;

}

HTML：

<td style="display: flex;">

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num--">-</a><!--style中的flex为了使其点击的范围扩大-->

                    {{item.num}}

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num++">+</a>

                </td>

由图可知点击商品数量减的时候会减到负数，所以需要做一个判断，如果数量为0，不能减下去：

加入判断之后的效果图：

加入判断的代码：

<td style="display: flex;">

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num=item.num--<=0?0:item.num--">-</a><!--style中的flex为了使其点击的范围扩大-->

                    {{item.num}}

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num++">+</a>

                </td>

增加入库日期：

最终效果：

加入的代码：

vue添加了addDate假数据，以及调节获取当前日期的格式：

goodsArry:[

                    {id:'',name:'可乐',price:3.5,num:,type:'零食',addDate:'2019-3-13'},

                    {id:'',name:'GTX2080',price:,num:,type:'电子产品',addDate:'2019-3-14'},

                    {id:'',name:'牙刷',price:,num:,type:'生活用品',addDate:'2019-3-20'}

                    ],

                    colNum:,

                    delArray:[]//删除选中的索引

                },

                methods:{

                    addGoods(){

                               var d = new Date();

                            var y = d.getFullYear();

                            var m = d.getMonth()+;

                            var day =d.getDate()<?''+d.getDate() : d.getDate();

                            var myDate = y+ '-' + m +'-'+day;

                            this.goods.addDate = myDate ;

                        this.goodsArry.push(this.goods);

                        this.goods={};

                    }

添加的HTML代码：

<table border="" align="center">

            <tr>

                <th>序号</th>

                <th>编号</th>

                <th>名称</th>

                <th>价格</th>

                <th>数量</th>

                <th>类型</th>

                <th width="100px">入库日期</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 style="display: flex;">

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num=item.num--<=0?0:item.num--">-</a><!--style中的flex为了使其点击的范围扩大-->

                    {{item.num}}

                    <a style="flex: 0.5;"  href="#" @click.prevent="item.num++">+</a>

                </td>

                <td>{{item.type}}</td>

                <td>{{item.addDate}}</td>

                <td>

实现修改商品数量以及增加入库日期属性总的代码：

 <!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:'零食',addDate:'2019-3-13'},

                     {id:'',name:'GTX2080',price:,num:,type:'电子产品',addDate:'2019-3-14'},

                     {id:'',name:'牙刷',price:,num:,type:'生活用品',addDate:'2019-3-20'}

                     ],

                     colNum:,

                     delArray:[]//删除选中的索引

                 },

                 methods:{

                     addGoods(){

                                var d = new Date();

                             var y = d.getFullYear();

                             var m = d.getMonth()+;

                             var day =d.getDate()<?''+d.getDate() : d.getDate();

                             var myDate = y+ '-' + m +'-'+day;

                             this.goods.addDate = myDate ;

                         this.goodsArry.push(this.goods);

                         this.goods={};

                     },

                     delGoods(index){

                         this.goodsArry.splice(index,);

                     },

                     clearGoodsArry(){

                      this.goodsArry=[];

                      },

                      delSelected(){

                          this.delArray.sort((a,b)=>{

                              return a-b;

                          });

                          console.log(this.delArray);

                          for(var i=;i<this.delArray.length;i++)

                          {

                              this.goodsArry.splice(this.delArray[i]-i,);

                          }

                          this.delArray=[];

                      }

                 }

             });

             }

         </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 a{

  text-decoration: none;

 }

 .table-warp th{

   width: 80px;

   color: #ffff;

   background: rgb(,,);

 }

 .logo

 {

   position: relative;

   top: 12px;

 }

 .fontColor{

     color: gray;

     text-align: center;

 }

 .clear-btn{

   text-align: right;

   padding-right: 10px;

 }

         </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 width="100px">入库日期</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 style="display: flex;">

                     <a style="flex: 0.5;"  href="#" @click.prevent="item.num=item.num--<=0?0:item.num--">-</a><!--style中的flex为了使其点击的范围扩大-->

                     {{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>

     <!--    {{delArray}}-->

         </table>

         <div class="clear-btn">

           <a href="#" @click="delSelected" v-show="delArray.length>0" >删除选中</a>

           <a href="#" @click="clearGoodsArry" v-show="goodsArry.length>0" >清空全部</a>

       </div>

       </div>

             </div>

     </body>

 </html>

实现修改商品数量以及增加入库日期

Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性的更多相关文章

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

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

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

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

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

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

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

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

  5. Vue小案例 之 商品管理------删除商品与提示

    实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...

  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. ROC曲线，AUC面积

    AUC(Area under Curve):Roc曲线下的面积,介于0.1和1之间.Auc作为数值可以直观的评价分类器的好坏,值越大越好. 首先AUC值是一个概率值,当你随机挑选一个正样本以及负样本, ...

  2. SQL 2008安装过程（转）

    这几天因为需要,一直想安装SQL Server 2008来作为Web后台的数据库进行些实验,但总是没有时间,今天终于有时间了,便安装了SQL Server 2008,以下是我的安装的步骤,希望对于有需 ...

  3. ECshop后台新功能权限添加

    ecshop后台新功能权限的添加 1.在后台“推荐管理”里添加“推荐人分成”.“会员分成”两个操作功能以及权限 index.php?act=menu incluedes/inc_priv.php:权限 ...

  4. TP父类及模板继承

    一.TP父类方法继承 session用法 用登录页面做例子 <?php namespace Home\Controller; use Think\Controller; class LoginC ...

  5. sqoop往远程hdfs写入数据时出现Permission denied 的问题

    猜测出现该问题的原因是sqoop工具用的是执行sqoop工具所用的本地用户名. 如果远程hdfs用的用户是hdfs,那么我本地还需要建一个名为hdfs的用户? 其实不需要,只要为用户增加一个环境变量就 ...

  6. 2017高教杯数学建模B 题分析

    B题原文 "拍照赚钱"是移动互联网下的一种自助式服务模式.用户下载APP,注册成为APP的会员,然后从APP上领取需要拍照的任务(比如上超市去检查某种商品的上架情况),赚取APP对 ...

  7. linux工作目录切换命令

    1．pwd命令 pwd命令用于显示用户当前所处的工作目录,格式为“pwd [选项]”. 2．cd命令 cd命令用于切换工作路径,格式为“cd [目录名称]”. 这个命令应该是最常用的一个Linux命令 ...

  8. php实现多进程

    转:http://www.jb51.net/article/71238.htm cd php-version/ext/pcntl phpize ./configure && make ...

  9. skynet对Windows环境支持的版本：Windows版skynet

    https://github.com/sanikoyes/skynet.git Skynet Skynet is a lightweight online game framework, and it ...

  10. 利用sqoop将hive数据导入导出数据到mysql

    一.导入导出数据库常用命令语句 1)列出mysql数据库中的所有数据库命令  #  sqoop list-databases --connect jdbc:mysql://localhost:3306 ...