Vue使用数组遍历生成dom结构，过滤掉不想要显示的记录---通过计算属性computed

前言

在前端日常开发的过程中会遇到这样的一类需求，在使用数组遍历生成dom结构，需要隐藏掉一些不想要显示的记录。在本例中，需要展示List中 parseInt(item[‘totalIndicatorScore’]) >= parseInt(item[‘thresholdValue’]) 的数据

一、问题描述

在遇到上述的问题的第一想法是能否通过 v-if 来对遍历出来的item进行处理，按照这个思路便有了如下的代码：
实现方式

<div class="rb-row" v-for="(item,index)  in warningDetailData" :key=index>
  <div v-if="parseInt(item['totalIndicatorScore']) >= parseInt(item['thresholdValue'])">
  	<div class="t">{{item['measureDimensionName']}}:</div>
		<div v-for="(item1,index1) in item['indicatorWarningInfoList']" :key=index1>
			<div class="rtags" v-if="item1['indicatorScore'] !== '0'">
			{{item1['subDimensionName']}}
			</div>
		</div>
	</div>
</div>

实现效果如下图：

这里我们可以明显的发现，即便隐藏了不需要显示的内容，但在使用v-for的过程中依然会遍历出多余的dom结构。出来的效果并不理想，会有间隔。

二、解决方案

我们可以通过使用 计算属性computed 来对源数据进行过滤，在对dom结构进行遍历之前把数据处理掉，这样不会出现多余的dom结构出来的。

提到computed计算机属性，我们就要简单讲解一些他的作用？
computed是创建了一个新的属性，并将该属性挂载到vm（Vue实例）上。
computed本质是一个惰性求值的观察者，具有缓存性。需要主动调用，只有数据再次改变才会重新渲染，否则就会直接拿取缓存中的数据。

实现方式

<div class="rb-row" v-for="(item,index)  in filterData" :key=index>
	<div class="t">{{item['measureDimensionName']}}:</div>
		<div v-for="(item1,index1) in item['indicatorWarningInfoList']" :key=index1>
			<div class="rtags" v-if="item1['indicatorScore'] !== '0'">
                {{item1['subDimensionName']}}
			</div>
		</div>
</div>

computed: {
	// 创建一个计算属性filterData
	filterData: function () {   
		if (this.warningDetailData && this.warningDetailData.length > 0) {
			// 将过滤过后的数据赋值给filterData
			let temp = this.warningDetailData.filter(item => 
				parseInt(item['totalIndicatorScore']) >= parseInt(item['thresholdValue']))
                    return temp
				} else {
                    return []
                }
			}
		}

实现效果如下图完美解决：