vue中只渲染數(shù)組中的第一條或某一條方式
更新時間：2025年11月03日 09:26:13 作者：以對_
文章講述了在Vue.js中如何根據(jù)數(shù)組索引渲染特定的數(shù)組元素,首先,介紹如何只渲染數(shù)組中的第一條數(shù)據(jù),其次,討論如何在特定頁面渲染特定的數(shù)組元素,例如通過父組件傳遞參數(shù)來決定渲染哪一條數(shù)據(jù),文章總結(jié)了個人經(jīng)驗,為開發(fā)者提供了一種有用的解決方案
vue只渲染數(shù)組中的第一條或某一條
場景
有時候數(shù)組中有兩條或多條數(shù)據(jù)，但只想渲染其中的某一條，或者在特定的頁面渲染某一條
根據(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>
二、在特定的頁面渲染某一條（比如父組件在調(diào)用子組件時傳過來一個值，根據(jù)這個值去判斷要渲染的數(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
kiss-vuex 是一個非常簡單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實用價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強大的功能之一，感興趣的小伙伴們可以參考一下2016-09-09
組件間通信簡單來說就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘５拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下2022-05-05
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡單封裝以及思考 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過程詳解)
本文詳細(xì)介紹了如何使用Vue.js和ElementUI創(chuàng)建一個進(jìn)度條組件,并將所有代碼保存在一個文件夾中,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)點擊翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
最近項目需要將原vue項目結(jié)合ts的使用進(jìn)行改造，本文從安裝到vue組件編寫進(jìn)行了說明，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了實現(xiàn)一個Vue版Upload組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08