后端传数值显示不同的内容，使用filters过滤器优化

最新推荐文章于 2024-02-05 16:47:14 发布

MeetCode

最新推荐文章于 2024-02-05 16:47:14 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/qq_42580876/article/details/110631646

版权

后端传数值显示不同的内容，使用filters过滤器优化

1、后端设置传回来的数组对应的内容
在这里插入图片描述
2、使用v-if判断数值的显示

<span v-if='record.building === 1'> 住宅 </span>
<span v-if='record.building === 2'> 商铺</span>
<span v-if='record.building === 3'> 写字楼 </span>
<span v-if='record.building === 4'> 车位</span>
<span v-if='record.building === 5'> 车辆</span>

3、使用filters过滤器优化处理

 filters: {
 	// 第一种学法
    buildingType (value) {
      return [ '住宅', '商铺', '写字楼', '车位' , '车辆' ][value - 1]   
    }
    // 第二种写法
    buildingType  (type) {
      const typeObj = {
        1: '住宅',
        2: '商铺',
        3: '写字楼',
        4: '车位',
        5: '车辆'
      }
      return typeObj[type]
    }
}
// 第一种学法要注意数组的索引值是在0开始的

4、过滤器中template中的使用

<template slot="withhold_subject" slot-scope="withhold_subject, record">
   <div class="fitems-name"> {{ record.building_type | buildingType }} </div>
</template>