详解Vue demo实现商品列表的展示
更新时间：2019年05月07日 11:08:20 作者：yazhiShaw
这篇文章主要介绍了Vue demo实现商品列表的展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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实现商品列表的展示详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
defineModel 是一个新的 <script setup> 宏,旨在简化支持 v-model 的组件的实现, 这个宏用来声明一个双向绑定 prop,下面我们就来看看他的具体使用吧2024-03-03
Vue3.x+Element Plus仿制Acro Design简洁模式实现分页器组件
开发中难免会遇到宽度很窄的列表需要使用分页器的情况。本文将利用Vue3.x+Element Plus仿制Acro Design简洁模式实现分页器组件，感兴趣的可以了解一下2023-02-02
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下2023-03-03
在现代应用开发中,实时性已成为用户体验的一个重要组成部分,ue 作为一款流行的前端框架,配合 WebSocket,可以轻松构建实时通知系统,在本文中,我们将通过一个简单的示例,使用 Vue 3 的 Composition API（setup 语法糖）来创建一个实时通知系统2024-11-11
这篇文章主要介绍了使用Vant框架list组件遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue中$router.push()路由切换及如何传参和获取参数
这篇文章主要给大家介绍了关于Vue中$router.push()路由切换及如何传参和获取参数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue3中的常见组件通信之v-model使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
Vue中 引入使用 babel-polyfill 兼容低版本浏览器的方法
最近在项目中使用 webpack 打包后升级，用户反馈使用浏览器（chrome 45）访问白屏。经过排查发现：由于 chrome 45 无法兼容 ES6 语法导致的，接下来给大家介绍下Vue中 引入使用 babel-polyfill 兼容低版本浏览器方法,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)
这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下2022-09-09
最新评论