vue中只渲染数组中的第一条或某一条方式
作者：以对_
文章讲述了在Vue.js中如何根据数组索引渲染特定的数组元素,首先,介绍如何只渲染数组中的第一条数据,其次,讨论如何在特定页面渲染特定的数组元素,例如通过父组件传递参数来决定渲染哪一条数据,文章总结了个人经验,为开发者提供了一种有用的解决方案
vue只渲染数组中的第一条或某一条
场景
有时候数组中有两条或多条数据，但只想渲染其中的某一条，或者在特定的页面渲染某一条
根据数组中的index进行判断
一、只想渲染其中的某一条（只渲染第一条数据）
<view class="" v-for="(item,index) in reviewDate" :key="index">
<view v-if="index == 0">
<text>{{item.title}}</text>
</view>
</view>
二、在特定的页面渲染某一条（比如父组件在调用子组件时传过来一个值，根据这个值去判断要渲染的数据）
- 父：
<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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。