v-for中通过item[a+b]获取数据的拼接方法

最新推荐文章于 2023-11-23 10:46:17 发布

一个诡异的bug

最新推荐文章于 2023-11-23 10:46:17 发布

阅读量709

点赞数

文章标签：前端 uni-app

本文链接：https://blog.csdn.net/weixin_44479794/article/details/124249724

版权

假如有这样的数据，要求根据当前年级查询对应的科目成绩

				index:1,//当前查询年级
				data:[
					{
						course:'语文',
						School_1:90,//一年级语文成绩
						School_2:80,//二年级语文成绩
					},
					{
						course:'数学',
						School_1:90,
						School_2:80,
					},
					{
						course:'英语',
						School_1:90,
						School_2:80,
					}
				],
				
				theSchool:'School_',//科目前缀

在渲染层v-for可以使用拼接的方法找到对应属性名，再显示，代码如下

<view v-for="(item,index) in data" class="h-tr h-tr-3">
	<view style="width: 40%;" class="h-td">{{item.course}}</view>
	<view style="width: 20%;" class="h-td">{{item[theSchool+index]}}</view>
</view>

关键代码{{item[theSchool+index]}}，若为字符串直接拼接则需要加 ' ' ,如{{item['School_'+'1']}}，通过拼接的方法定位到想找的属性名