插槽循环、属性调用的问题

当接口返回的数据有很多条数据需要使用到插槽进行相似的处理时，可以使用v-for对插槽进行循环。

 

 <template
        v-for="name in ['a','b','c','d','e','f',]"
        #[name]="{record}"
        :key="name"
 >
        {{record.dataList?.map(item=>item[name])?.reduce((prev,cur)=>prev+cur,0)}}
 </template>

注意：在使用map遍历数据时，item调用变量name的时候，要使用item[name]形式才可以，item.name它调用的是item中的字段名为name的那一条数据了。也不能写成item.[name]这种形式。

其实中间那句可以这样写{{record.monitorDetailList?.reduce((prev,cur)=>prev+cur[name],0)}}，map有些多余了。

对象调用属性有两种方式：

1，使用 .调用

2，使用 []调用

两者的用法是：中括号里面的一般是变量，但点调用的必须是指定的属性名。对象动态添加属性的时候，要使用中括号来调用，而且中括号里的属性名允许是数字，点调用不可以调用属性名是数字的