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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
kiss-vuex 是一个非常简单的语法糖类库，这篇文章主要介绍了傻瓜式vuex语法糖kiss-vuex整理，非常具有实用价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要为大家介绍了Vue.js组件，组件是Vue.js最强大的功能之一，感兴趣的小伙伴们可以参考一下2016-09-09
组件间通信简单来说就是组件间进行数据传递,就像我们日常的打电话,就是通讯的一种方式,下面这篇文章主要给大家介绍了关于vue组件是如何实现组件通讯的相关资料,需要的朋友可以参考下2022-05-05
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要介绍了vue axios 简单封装以及思考 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了详解vuex中mutation/action的传参方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
DeepSeek 助力 Vue 开发丝滑的步骤条效果(过程详解)
本文详细介绍了如何使用Vue.js和ElementUI创建一个进度条组件,并将所有代码保存在一个文件夹中,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2025-02-02
这篇文章主要为大家详细介绍了Vue.js标签页组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一2019-10-10
这篇文章主要为大家详细介绍了vue实现点击翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最近项目需要将原vue项目结合ts的使用进行改造，本文从安装到vue组件编写进行了说明，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了实现一个Vue版Upload组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
最新评论