遍历数组并且添加键值对

最新推荐文章于 2023-10-10 16:42:08 发布

牛油的果

最新推荐文章于 2023-10-10 16:42:08 发布

阅读量205

点赞数

分类专栏： uniapp js 文章标签：算法 uni-app html vue.js

本文链接：https://blog.csdn.net/weixin_57633124/article/details/131184951

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

uniapp

8 篇文章 0 订阅

订阅专栏

实例:根据接口渲染列表,并且实现点击右边小图标实现是否展示功能

1.HTML代码(problemList 是item)

<template>
	<view class="container">
		<view class="frequelist" >
            //problemList相当于item,指的是数组中的每一项
			<view class="frequblock" v-for="(problemList,key,index) in frearry">
				<view class="freblock">
					<view class="frequestion">
						<image class="frequestionlogo" src="../../static/images/frequestionlogo.png" mode=""></image>
						<view class="questionnumber">Q{{problemList.id}}</view>
					</view>
					<view class="questionspecific">{{problemList.question}}</view>
					<view class="" @click="showTextImage(index)" >
						<image class="frequestionmoreup" v-if="problemList.showText" src="../../static/images/frequestionmoreup.png" mode=""></image>
						<image class="frequestionmoredown" v-else src="../../static/images/frequestionmoredown.png" mode=""></image>
					</view>
				</view>
				<view class="answercontent" v-if="problemList.showText">{{problemList.answer}}</view>
				<view class="greyblockline"></view>
			</view>
			<view class="frewhitblock"></view>
		</view>
	</view>
</template>

2.调接口代码

<script>
//引用接口
import { getfrequentlyList } from "@/api/otherApi.js"
	export default {
		data() {
			return {
				frearry:[],
				showText:"",
			}
		},
		onLoad(){
            //进入页面就渲染
			this.getgoods()
		},
		methods: {
			getgoods(){
				let obj = {}
                //选中接口数组
				let freadetemine=this.frearry
				let selfThis = this
                //调用接口
				getfrequentlyList(obj).then(res=>{
					let goodsManage=res.data	
                    //遍历各项数组并添加			
					for (let problemList of goodsManage.data) {
						 problemList.showText=false
					}				
                     //添加数据之后再渲染到页面上(注意前后顺序)	
					selfThis.frearry=goodsManage.data
                    //这里可以打印页面数据检查是否添加
					console.log(goodsManage.data)
				  
				}).catch(err=>{
				  console.log('ERROR')
				});
			
			},
            //点击事件(决定是否展示)
			showTextImage(index){
				let frecontnum=this.frearry
				frecontnum[index].showText=!frecontnum[index].showText
			}
			
		}
	}
</script>

如有错误,请各位大佬不吝赐教~~