Vue小案例 之 商品管理------创建页面与部分数据
logo的路径：
页面的初始布局：
初始的HTML：
<div id="container">
<!--logo title-->
<div class="header">
<img :src="imgUrl+imgName" class="logo" height="200px" width="150px" 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="请输入商品编号" /><br />
商品名称：<input type="text" placeholder="请输入商品名称" /><br />
商品价格：<input type="text" placeholder="请输入商品价格" /><br />
商品数量：<input type="text" placeholder="请输入商品数量" /><br />
商品类型：<select>
<option value="" disabled="disabled">--请选择--</option>
</select>
</div>
<div class="form-btn"></div>
</div>
<!--显示表格-->
<div class="table-warp"></div>
</div>
初始css：
<style>
#container{
margin: auto;
text-align: center;
width: 1000px;
border:2px solid gray;
} </style>
初始vue：
<script>
window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico'
},
methods:{
}
});
}
</script>
进行了定义变量和变量的引入以及使用了v-model与v-for进行遍历数组：
使用了v-model,v-for之后的代码：
<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"></div>
</div>
<!--显示表格-->
<div class="table-warp"></div>
</div>
vue代码：
<script>
window .onload= () =>{
new Vue({
el:"#container",
data:{
imgUrl:'../res/images/',
imgName:'lovely.ico',
goods:{
id:'',
name:'',
price:'',
num:'',
type:''
},
goodsType:['零食','电子产品','生活用品']
},
methods:{
}
});
}
</script>
总的代码：
<!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:['零食','电子产品','生活用品'] },
methods:{ }
});
}
</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"></div> </div>
<!--显示表格-->
<div class="table-warp"></div> </div>
</body>
</html>
商品管理------创建页面与部分数据
Vue小案例 之 商品管理------创建页面与部分数据的更多相关文章
- Vue小案例 之 商品管理------为之前的页面修改样式
最终修改的页面效果: 修改的css: <style> #container{ margin: auto; text-align: center; width: 1000px; border ...
- 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小案例（一）
案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
随机推荐
- Extjs event domain 研究
Listeners and Event Domains In Ext JS 4.2, the MVC event dispatcher was generalized with the introdu ...
- 引：Jmeter添加变量的四种方法
一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...
- 高危Windows系统 SMB/RDP远程命令执行漏洞 手工修复办法
1.Windows Update更新补丁方式: 更新方法:点击“开始”->“控制面板”->“Windows Update” ,点击“检查更新”-“安装更新”: 2.检查安装结果: 点击“ ...
- MSSqlServer 发布/订阅配置（主从同步）
背景: 1.单个独立数据库的吞吐量是有瓶颈的,那么如何解决这个瓶颈? 2.服务器直接数据如何复制.并具备一致性.可扩展性? 资源: 官方资源:https://technet.microsoft.com ...
- cocos2d JS 鼠标响应事件
对于PC和超级本,添加鼠标事件的的处理,可以加强用户的体验,其处理逻辑与触摸事件基本一样,多了一些鼠标特有的事件响应 如滚轮事件(onMouseScroll) cc.eventManager.addL ...
- 虚拟机 liunx系统以 root 身份登录权限
开启虚拟机 打开终端开启root账户 :sudo passwd -u root 输入当前用户的密码 为root账户设置密码:sudo passwd root 设置root密码,输入两次 测试r ...
- eclipse签名使用的key文件(android生成keystore)
命令行(或终端)生成keystore文件 在命令行(或终端)输入命令: keytool -genkey -alias Gallery.keystore -keyalg RSA -validit ...
- vs使用gitflow
1.背景:之前在开发一个项目时,用tfs管理代码,并用“禁止多人编辑”来避免冲突,但仅适用于开发团队较小时.缺点: (1).开发团队较大,开发人员较多时,会出现经常互相锁,增加沟通成本.比如增加文件时 ...
- kali linux 基本命令（第一批）
pwd , rm ,locate ,cat ,head , clear ,ls ,cd ,mkdir ,touch ,ec ...
- CentOS上svn checkout时报错SSL handshake failed: SSL error: Key usage violation in certificate has been det
局域网安装了个SVN在checkout的时候报错 SSL handshake failed: SSL error: Key usage violation in certificate has bee ...