详解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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
Three.js基础部分学习
Jan 08 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 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/05/08 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
在vue中使用setInterval的方法示例
2019/04/16 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python数据类型学习笔记
2016/01/13 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
致铅球运动员广播稿精选
2014/01/12 职场文书
团日活动总结范文
2014/04/25 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android