Vue小案例 之 商品管理------为之前的页面修改样式
最终修改的页面效果：
修改的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小案例 之 商品管理------为之前的页面修改样式的更多相关文章
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- Vue小案例 之 商品管理------修改商品数量以及增加入库日期属性
实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-dec ...
- Vue小案例 之 商品管理------批量删除与商品数量的调整
通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...
- Vue小案例 之 商品管理------删除商品与提示
实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div clas ...
- Vue小案例（一）
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- VUE小案例--简易计算器
这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...
随机推荐
- FreeMaker常用表达式
1,日期转换 ${data.startDate?string("yyyy-MM-dd HH:mm")} 2,非空检查 当数据为null时,1中日期转换在界面上不会显示异常,但在日志 ...
- 常用 shell 命令
watch watch -n 1 -d "ps -ef | grep php" 功能:监控 PHP 进程的变化 原理: 重复的执行后面的命令,默认时间间隔是2秒 参数解释 -d 高 ...
- vue--项目文件
build config:webpack的配置文件 node_modules: 依赖的npm包 src: 项目代码 static:依赖的第三方库 ps:static中有个文件.gitkeep 因为新建 ...
- java面试中经常会被问到分布式面试题
1.Dubbo的底层实现原理和机制 –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 Dubbo缺省协议采用单一长连接和NIO异步通讯, 适合于小数据量大并发的服务调用,以及服务消费者机 ...
- linux 编译 'aclocal-1.14' is missing on your system
centos编译出现:类似情况: $tar -xvf libpcap-1.0.0.tar.gz $cd libpcap-1.0.0.tar.gz $./configure ...
- 使用Github进行代码管理
准备: Github地址:https://github.com 注册Github帐号 一.新建仓库 进入如下界面: 到这里仓库就创建完成了. 二.安装Github-window-desktop 安装g ...
- 42.PHP--电商网站的询价插件
windows下使用php自带的mail函数实现简单的邮件发送实例(QQ亲试成功) 功能实现:通过中间邮箱把客户的需求和产品信息全部发送到公司的业务员邮箱 环境及工具: win7_64bit phps ...
- Winform下如何上传图片并显示出来。同时保存到数据库
通常,我们在开发软件或者网站是否,通常有时候需要添加图片,我们怎么做呢,直接贴例子. 前提是添加openFileDialog控件哈 #region 定义公共的类对象及变量 SqlConn ...
- SQL Server数据库（时间戳timestamp）类型
1.公开数据库中自动生成的唯一二进制数字的数据类型. 2.timestamp 通常用作给表行加版本戳的机制. 3.存储大小为 8 个字节. 不可为空的 timestamp 列在语义上等价于 binar ...
- report源码分析——report_handle和report_server和report_catcher
report_handle主要实现对message的action,severity,file的设置,然后将message传递给server: 主要的function有两个:initial和proces ...