详解Vue demo实现商品列表的展示


Posted in Javascript onMay 07, 2019

Vue实现商品列表的展示是一个比较简单的入门demo,下面是具体的实现:

简单CSS样式:

<style>
	#box ul{
		display: flex;
		flex-wrap: wrap;
	}
	#box li{
		padding: 3px;
		list-style: none;
		margin-right: 15px;
		border: 1px solid #eee;
	}
	#box img{
		width: 200px;
		height: 150px;
	}
</style>

html:

<div class="" id="box">
		<ul>
			<li v-for="v in json.list">
				<img v-bind:src="v.src" alt="">
				<h4>{{v.des}}</h4>
				<p>{{v.price}}</p>
			</li>
		</ul>
	</div>

Vue组件:

new Vue({
			el:'#box',
	 data:{
		 json:{
			 list:[
				 {
				 src:'images/1.jpg',
					 des:'这是第一个描述',
					 price:198
				 },
				 {
					 src:'images/2.jpg',
					 des:'这是第二个描述',
					 price:198
				 },
				 {
					 src:'images/3.jpg',
					 des:'这是第三个描述',
					 price:211
					},
				 {
					 src:'images/1.jpg',
					 des:'这是第一个描述',
					 price:198
				 },
				 {
					 src:'images/3.jpg',
					 des:'这是第二个描述',
					 price:112
				 },
				 {
					 src:'images/3.jpg',
					 des:'这是第三个描述',
					 price:423
						}
					]
				}
			}
		})

最终效果:

详解Vue demo实现商品列表的展示

以上所述是小编给大家介绍的Vue demo实现商品列表的展示详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS远程获取网页源代码实例
Sep 05 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
canvas实现探照灯效果
Feb 07 Javascript
jquery事件与绑定事件
Mar 16 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 #Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 #Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 #Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 #Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 #Javascript
vue接入腾讯防水墙代码
May 07 #Javascript
You might like
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python写的一个简单监控系统
2015/06/19 Python
学习python类方法与对象方法
2016/03/15 Python
Python检测生僻字的实现方法
2016/10/23 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python中scikit-learn机器代码实例
2018/08/05 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
银行会计财务工作个人的自我评价
2013/10/29 职场文书
企划专员岗位职责
2013/12/09 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
宾馆客房管理制度
2015/08/06 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书