详解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 png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
心扬JS分页函数代码
Sep 10 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
如何在python中实现随机选择
2019/11/02 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python requests接口测试实现代码
2020/09/08 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
党员个人思想汇报
2013/12/28 职场文书
迎七一演讲稿
2014/09/12 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android