详解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中判断控件是否存在
Aug 25 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
canvas绘制多边形
Feb 24 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
node中的密码安全(加密)
Sep 17 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
vue二级路由设置方法
2018/02/09 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
主管职责范文
2013/11/09 职场文书
公司活动邀请函
2014/01/24 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
自我推荐信范文
2014/05/09 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
golang语言指针操作
2022/04/14 Golang