快捷導(dǎo)航

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

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

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

Vue實(shí)現(xiàn)商品列表的展示是一個比較簡單的入門demo，下面是具體的實(shí)現(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實(shí)現(xiàn)商品列表的展示詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue中如何使用mock模擬數(shù)據(jù)
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
解決vue prop傳值default屬性如何使用,為何不生效的問題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
VUE長按事件需求詳解
這篇文章主要為大家詳細(xì)介紹了為大家詳細(xì)幾種長按事件的需求，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue中$set與$delete的使用及說明
這篇文章主要介紹了vue中$set與$delete的使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
vue各種時間類型轉(zhuǎn)換方法例子
前端前后端接?處理時經(jīng)常會遇到需要轉(zhuǎn)換不同時間格式的情況,下面這篇文章主要給大家介紹了關(guān)于vue各種時間類型轉(zhuǎn)換的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度
這篇文章主要介紹了vue+element-ui+axios多文件上傳的實(shí)現(xiàn)并顯示整體進(jìn)度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue實(shí)現(xiàn)微信支付功能遇到的坑
這篇文章主要介紹了Vue實(shí)現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下
2019-06-06
關(guān)于Vue中$refs的探索淺析
這篇文章主要給大家介紹了關(guān)于Vue中$refs的探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11