Vue小案例 之 商品管理------创建页面与部分数据
2024-04-08 21:20:30
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: 0 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>总的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>商品管理------创建页面与部分数据</title>
6 <script src="../js/vue.js"></script>
7
8 <script>
9
10
11 window .οnlοad= () =>{
12 new Vue({
13 el:"#container",
14 data:{
15 imgUrl:'../res/images/',
16 imgName:'lovely.ico',
17 goods:{
18 id:'',
19 name:'',
20 price:'',
21 num:'',
22 type:''
23 },
24 goodsType:['零食','电子产品','生活用品']
25
26
27
28 },
29 methods:{
30
31
32 }
33 });
34 }
35 </script>
36 <style>
37 #container{
38 margin: 0 auto;
39 text-align: center;
40 width: 1000px;
41 border:2px solid gray;
42 }
43
44
45 </style>
46 </head>
47 <body>
48 <div id="container">
49
50 <!--logo title-->
51 <div class="header">
52 <img :src="imgUrl+imgName" class="logo" height="200px" width="200px" style="padding-top: 0px; float: left;"/>
53 <h1 class="title">商品管理</h1>
54
55 </div>
56
57 <!--输入部分input-->
58 <div class="form-warp">
59 <div class="title">添加商品</div>
60 <div class="content">
61
62 商品编号：<input type="text" placeholder="请输入商品编号" v-model="goods.id"/><br />
63 商品名称：<input type="text" placeholder="请输入商品名称" v-model="goods.name"/><br />
64 商品价格：<input type="text" placeholder="请输入商品价格" v-model="goods.price"/><br />
65 商品数量：<input type="text" placeholder="请输入商品数量" v-model="goods.num"/><br />
66 商品类型：<select v-model="goods.type">
67
68 <option value="" disabled="disabled">--请选择--</option>
69 <option v-for="type in goodsType">{{type}}</option>
70
71 </select>
72
73 </div>
74 <div class="form-btn"></div>
75
76 </div>
77 <!--显示表格-->
78 <div class="table-warp"></div>
79
80
81
82
83 </div>
84 </body>
85 </html>商品管理------创建页面与部分数据
转载于:https://www.cnblogs.com/jiguiyan/p/10705076.html
Vue小案例 之 商品管理------创建页面与部分数据相关推荐
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"><button>确认添加</button>&l ...
- Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
- 分析初识vue小案例
前言 我们已经写好了一个案例:初识vue小案例 接下来我们就分析初识vue小案例 容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多 下面是一个一个容器对多个 ...
- vue小案例（小黑记事本和购物车）
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...
- Vue实战之 9.商品管理 -- 商品列表
1. 商品管理概述 商品管理模块用于维护电商平台的商品信息,包括商品的类型.参数.详情等.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能. 2. 商品列表 实现商品列表布局效果 调用后台接 ...
- 微信小程序：实现选择视频 + 页面跳转 + 数据传送功能
一.实现的功能 还是这个熟悉的页面: 这次实现: 点击"选择视频"按钮,可以从本地相册中选取相册或者图片,并传回给该页面 再选择完视频之后,会出现一个新的页面,并且这个页面会出现刚 ...
- 前端学习（3081）：vue+element今日头条管理-创建页面组件并加载
- 前端学习（3045）：vue+element今日头条管理-创建页面组件
最新文章
- jquery等待特定元素加载再执行相关函数
- lbp7660cdn设置网络打印_一篇文章弄懂局域网打印机共享
- Hadoop概念学习系列之Hadoop 生态系统
- 三个梯度磁场_第二节 梯度磁场系统
- 一行代码实现数组降维去重排序
- Python安装Pytorch教程（图文详解）
- II.MongoDB CRUD Operations(CRUD操作)
- CSDN-markdown
- 群晖NAS详细教程 DSM6.1.7版本（亲测有效）传统BIOS
- java pcm to wav_Java音频转换：PCM格式转WAV格式
- 顺序表和链表 相关知识点总结
- 老师用计算机教我们画画拼音,《ang eng ing ong》教案
- 如何通过一根网线连接两台电脑,实现数据的传输?
- 坚守梦想，善待苦难，等幸福来敲门
- 关于gradle项目中使用queryDsl生成Q类的问题的解决方式
- 如何查看斐讯路由器的版本
- 关于Findbugs的一些常见报错的翻译和处理方式
- 使用Xpath爬取校花网，致敬10年前的校花『和』我们逝去的青春
- 交通规划辅助决策系统构建及佛山实践
- 亿网文交孟建州，分享代码里有意思的事