詳解Vue demo實(shí)現(xiàn)商品列表的展示

更新時(shí)間：2019年05月07日 11:08:20 作者：yazhiShaw

這篇文章主要介紹了Vue demo實(shí)現(xiàn)商品列表的展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Vue實(shí)現(xiàn)商品列表的展示是一個(gè)比較簡(jiǎn)單的入門demo，下面是具體的實(shí)現(xiàn)：

簡(jiǎ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:'這是第一個(gè)描述',
					 price:198
				 },
				 {
					 src:'images/2.jpg',
					 des:'這是第二個(gè)描述',
					 price:198
				 },
				 {
					 src:'images/3.jpg',
					 des:'這是第三個(gè)描述',
					 price:211
					},
				 {
					 src:'images/1.jpg',
					 des:'這是第一個(gè)描述',
					 price:198
				 },
				 {
					 src:'images/3.jpg',
					 des:'這是第二個(gè)描述',
					 price:112
				 },
				 {
					 src:'images/3.jpg',
					 des:'這是第三個(gè)描述',
					 price:423
						}
					]
				}
			}
		})

最終效果：

以上所述是小編給大家介紹的Vue demo實(shí)現(xiàn)商品列表的展示詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue3.4中v-model雙向數(shù)據(jù)綁定新玩法詳解
defineModel?是一個(gè)新的?<script?setup>?宏,旨在簡(jiǎn)化支持?v-model?的組件的實(shí)現(xiàn),?這個(gè)宏用來(lái)聲明一個(gè)雙向綁定?prop,下面我們就來(lái)看看他的具體使用吧
2024-03-03
Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件
開(kāi)發(fā)中難免會(huì)遇到寬度很窄的列表需要使用分頁(yè)器的情況。本文將利用Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件，感興趣的可以了解一下
2023-02-02
uniapp使用uview的簡(jiǎn)單案例
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開(kāi)發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下
2023-03-03
使用Vue與WebSocket創(chuàng)建實(shí)時(shí)通知系統(tǒng)
在現(xiàn)代應(yīng)用開(kāi)發(fā)中,實(shí)時(shí)性已成為用戶體驗(yàn)的一個(gè)重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實(shí)時(shí)通知系統(tǒng),在本文中,我們將通過(guò)一個(gè)簡(jiǎn)單的示例,使用 Vue 3 的 Composition API（setup 語(yǔ)法糖）來(lái)創(chuàng)建一個(gè)實(shí)時(shí)通知系統(tǒng)
2024-11-11
使用Vant框架list組件遇到的坑及解決
這篇文章主要介紹了使用Vant框架list組件遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-03-03
Vue3中的常見(jiàn)組件通信之v-model使用詳解
這篇文章主要介紹了Vue3中的常見(jiàn)組件通信之v-model使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶反饋使用瀏覽器（chrome 45）訪問(wèn)白屏。經(jīng)過(guò)排查發(fā)現(xiàn)：由于 chrome 45 無(wú)法兼容 ES6 語(yǔ)法導(dǎo)致的，接下來(lái)給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下
2023-02-02
Vue自定義加水波紋效果指令實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語(yǔ)法糖各種語(yǔ)法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語(yǔ)法糖的各種新語(yǔ)法的使用方法,需要的朋友可以參考下
2022-09-09