快捷導(dǎo)航

vue中只渲染數(shù)組中的第一條或某一條方式

更新時(shí)間：2025年11月03日 09:26:13 作者：以對(duì)_

文章講述了在Vue.js中如何根據(jù)數(shù)組索引渲染特定的數(shù)組元素,首先,介紹如何只渲染數(shù)組中的第一條數(shù)據(jù),其次,討論如何在特定頁(yè)面渲染特定的數(shù)組元素,例如通過(guò)父組件傳遞參數(shù)來(lái)決定渲染哪一條數(shù)據(jù),文章總結(jié)了個(gè)人經(jīng)驗(yàn),為開發(fā)者提供了一種有用的解決方案

vue只渲染數(shù)組中的第一條或某一條

場(chǎng)景

有時(shí)候數(shù)組中有兩條或多條數(shù)據(jù)，但只想渲染其中的某一條，或者在特定的頁(yè)面渲染某一條

根據(jù)數(shù)組中的index進(jìn)行判斷

一、只想渲染其中的某一條（只渲染第一條數(shù)據(jù)）

<view class="" v-for="(item,index) in reviewDate" :key="index">
	<view v-if="index == 0">
		<text>{{item.title}}</text>
	</view>
</view>

二、在特定的頁(yè)面渲染某一條（比如父組件在調(diào)用子組件時(shí)傳過(guò)來(lái)一個(gè)值，根據(jù)這個(gè)值去判斷要渲染的數(shù)據(jù)）

父：

<ReviewInfo :reviewid="reviewid"></ReviewInfo>

<script>
	import ReviewInfo from'../../components/common/Review-info.vue';
	export default {
		data() {
			return {  
				reviewid:0,
			}
		}
	}
</script>

子：Review-info.vue

<view class="" v-for="(item,index) in reviewDate" :key="index">
	<view v-if="index == reviewid">
		<text>{{item.title}}</text>
	</view>
</view>

<script>
	export default {
		props:{
			reviewid:Number
		},
	}
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

傻瓜式vuex語(yǔ)法糖kiss-vuex整理
kiss-vuex 是一個(gè)非常簡(jiǎn)單的語(yǔ)法糖類庫(kù)，這篇文章主要介紹了傻瓜式vuex語(yǔ)法糖kiss-vuex整理，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
強(qiáng)大Vue.js組件淺析
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強(qiáng)大的功能之一，感興趣的小伙伴們可以參考一下
2016-09-09
詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的
組件間通信簡(jiǎn)單來(lái)說(shuō)就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實(shí)現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下
2022-05-05
vue axios 簡(jiǎn)單封裝以及思考
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡(jiǎn)單封裝以及思考 ,需要的朋友可以參考下
2018-10-10
詳解vuex中mutation/action的傳參方式
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過(guò)程詳解)
本文詳細(xì)介紹了如何使用Vue.js和ElementUI創(chuàng)建一個(gè)進(jìn)度條組件,并將所有代碼保存在一個(gè)文件夾中,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2025-02-02
Vue.js標(biāo)簽頁(yè)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁(yè)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一
2019-10-10
vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
vue項(xiàng)目中使用ts（typescript）入門教程
最近項(xiàng)目需要將原vue項(xiàng)目結(jié)合ts的使用進(jìn)行改造，本文從安裝到vue組件編寫進(jìn)行了說(shuō)明，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
實(shí)現(xiàn)一個(gè)Vue版Upload組件
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue版Upload組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08