vue中只渲染数组中的第一条或某一条方式
更新时间：2025年11月03日 09:26:13 作者：以对_
文章讲述了在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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue项目中引入 ECharts，ECharts是一个强大的画图插件，在vue项目中，我们常常可以引用Echarts来完成完成一些图表的绘制；以下介绍vue项目中引用并使用ECharts，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了详解vue如何使用rules对表单字段进行校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了vuex 闲置状态重置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
elementUI中input回车触发页面刷新问题与解决方法
这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
用户自行开发了一个Vue登录注册组件,采用Bootstrap表单样式,简单实现防短信轰炸功能,但因接口存在bug仅模拟了登录注册流程2025-07-07
这篇文章主要介绍了使用vuex缓存数据并优化自己的vuex-cache，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章主要介绍了vue 项目地址去掉 #的方法,需要的朋友可以参考下2018-10-10
今天小编就为大家分享一篇vue项目打包部署_nginx代理访问方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了el-tree的实现叶子节点单选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
最新评论