最终修改的页面效果：

修改的css：

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

}

        </style>

将 商品列表 和 添加商品 标题的class改为sub_title

总的代码：

 <!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;

             }

           .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;

 }

         </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="sub_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. Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

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

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

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

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

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

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

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

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

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

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

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

  7. Vue小案例（一）

    案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...

  8. vue小案例--简易评论区

    一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...

  9. VUE小案例--简易计算器

    这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...

随机推荐

  1. Java Selenium - 几种对话框处理Alert\confirm\prompt

    1. Alert , 先用常规办法定位到能触发alert的按钮 , 然后 Alert alert = driver.switchTo().alert(); alert.accept(); 如果aler ...

  2. 修改CentOS的IP地址

    一.临时修改 命令:ifconfig eth0 192.168.1.147 重启或者关机后,iP地址将会恢复到修改之前的状态. 二.永久修改 命令: vi /etc/sysconfig/network ...

  3. phing

    javascript compress java -jar ./compiler.jar --js {from} --js_output_file {to}

  4. SQL Server 2014忘记SA密码或禁用而且Windows身份验证也无法登录的解决办法

    SQL Server双重验证都无法验证的情况下如何处理 1.以管理员身份运行sql配置管理器 2.打开[Sql Server 服务]节点关掉所有服务 3.双击本地实例[SQL Server (MSSQ ...

  5. Deeplab v3+的结构代码简要分析

    添加了解码模块来重构精确的图像物体边界.对比如图 deeplab v3+采用了与deeplab v3类似的多尺度带洞卷积结构ASPP,然后通过上采样,以及与不同卷积层相拼接,最终经过卷积以及上采样得到 ...

  6. HDU 4565 So Easy(矩阵解公式)

    So Easy [题目链接]So Easy [题目类型]矩阵解公式 &题解: 感觉这种类型的题都是一个套路,这题和hdu 2256就几乎是一样的. 所以最后2Xn就是答案 [时间复杂度]\(O ...

  7. jQuery-数据管理-删除事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Spark Streaming 002 统计单词的例子

    1.准备 事先在hdfs上创建两个目录: 保存上传数据的目录:hdfs://alamps:9000/library/SparkStreaming/data checkpoint的目录:hdfs://a ...

  9. 解决ORA-00257: 归档程序错误。在释放之前仅限于内部连接

    昨天尝试通过plsqldev尝试连接oracle数据库,报错,提示ORA-00257: 归档程序错误.在释放之前仅限于内部连接 通过查询,得知原因是archivedlog达到了数据库设置的空间限制. ...

  10. Unity shader学习之反射

    shader如下: Shader "Custom/Reflection" { Properties { _Cubemap("Cubemap", Cube) = ...