进行添加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小案例 之 商品管理------添加商品的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  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. IntelliJ Idea Java 使用

    IntelliJ Idea热加载 自动更新 IntelliJ IDEA热加载自动更新(Update classes and resources ) IntelliJ IDEA默认文件是自动保存的,但是 ...

  2. Kotlin provideDelegate

    提供委托 这又是一个蛋疼的叫法,其实,就是给A和委托B之间插入一个中间件而已 这个中件间的作用是用了对委托的参数做一个校验 好了,别的不多说,直接给demo import kotlin.reflect ...

  3. iOS 新浪微博-5.3 首页微博列表_集成图片浏览器

    实际上,我们可以使用李明杰在教程里集成的MJPhotoBrowser,地址: http://code4app.com/ios/快速集成图片浏览器/525e06116803fa7b0a000001 使用 ...

  4. 项目遇到的css样式

    1. 这种怎么写?用radio,我这里用的时element的radio <div class="menu"> <span>我的粉丝({{totalNumbe ...

  5. MyBatis基础入门《十六》缓存

    MyBatis基础入门<十六>缓存 >> 一级缓存 >> 二级缓存 >> MyBatis的全局cache配置 >> 在Mapper XML文 ...

  6. php 文件远程下载

    getFile(“http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg”,”,’xuxin’);/*** php实现下载远程图片保存到本地 ...

  7. C#学习入门第一篇

    1. using System; using System.Collections.Generic; using System.Ling; using System.Text; using Syste ...

  8. 【转载】C# 中的委托和事件(详解：简单易懂的讲解)

    本文转载自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委托和事件(详解) C# 中的委托和事件 委托和事件在 ...

  9. django-pagination 样式修改

    默认 django-pagination  样式: 使用bootstrap后样式: (有些瑕疵,下面来完善一下) 修改后: 效果还不错吧.那么讲下如何修改. 首先找到其源码: (路径:site-pac ...

  10. Discuz目录结构

    /source/class/task站点任务内置包 task_avatar.php头像类任务 task_blog.php发表日志任务 task_connect_bind.phpQQ 帐号绑定任务 ta ...