詳解Vue demo實現(xiàn)商品列表的展示
更新時間：2019年05月07日 11:08:20 作者：yazhiShaw
這篇文章主要介紹了Vue demo實現(xiàn)商品列表的展示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
Vue實現(xiàn)商品列表的展示是一個比較簡單的入門demo，下面是具體的實現(xiàn)：
簡單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實現(xiàn)商品列表的展示詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個新的?<script?setup>?宏,旨在簡化支持?v-model?的組件的實現(xiàn),?這個宏用來聲明一個雙向綁定?prop,下面我們就來看看他的具體使用吧2024-03-03
Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件
開發(fā)中難免會遇到寬度很窄的列表需要使用分頁器的情況。本文將利用Vue3.x+Element Plus仿制Acro Design簡潔模式實現(xiàn)分頁器組件，感興趣的可以了解一下2023-02-02
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個使用?Vue.js?開發(fā)所有前端應用的框架,這篇文章主要給大家介紹了關于uniapp使用uview的簡單案例,需要的朋友可以參考下2023-03-03
使用Vue與WebSocket創(chuàng)建實時通知系統(tǒng)
在現(xiàn)代應用開發(fā)中,實時性已成為用戶體驗的一個重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實時通知系統(tǒng),在本文中,我們將通過一個簡單的示例,使用 Vue 3 的 Composition API（setup 語法糖）來創(chuàng)建一個實時通知系統(tǒng)2024-11-11
這篇文章主要介紹了使用Vant框架list組件遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue3中的常見組件通信之v-model使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項目中使用 webpack 打包后升級，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 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