vue 循环展示中字段转义，一个字段对应转义超过两个，计算属性传参

最新推荐文章于 2024-01-31 14:32:02 发布

肥喵蒙太奇

最新推荐文章于 2024-01-31 14:32:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 菜鸡日记

本文链接：https://blog.youkuaiyun.com/YYYYYun/article/details/105042464

菜鸡日记同时被 2 个专栏收录

44 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

本文探讨了在Vue中如何处理列表循环时的字段转换，特别是在计算属性中使用闭包函数来实现参数传递的方法，同时提及了switch语句在模板中的使用限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中列表循环，其中某字段需要转意。
因为该字段对应值不止两个，所以无法使用三元运算符。
也没有使用组件嵌套，所以需要在一个页面完成数据查询和处理两个步骤。

经过尝试得知

vue中computed计算属性无法直接进行传参，在计算属性中接受数据，打印出来的是vue实例
可以使用闭包函数（匿名函数）实现传参

【未解决】为什么switch不生效

<template>
	<div>
	<div class="reportItem" v-for="item in data" v-bind:key="item.IDNo">
        <ul>
            <li class="item row_left">
              <div class="title">证件类型</div>
              <div class="cont" v-text="showIDType(item.IDType)"></div>
            </li>
        </ul>
      </div>
	</div>
</template>

export default {
  data() {
    return {
      data: [
      {
        userName: '张三',
        telephone: '16600001111',
        IDNo: '123456199001019988',
        IDType: '1'
      },
      {
        userName: '李四',
        telephone: '18811110000',
        IDNo: '123456199001019980',
        IDType: '2'
      }，
      {
        userName: '王五',
        telephone: '17711110000',
        IDNo: '123456199001019980',
        IDType: '3'
      }
    ]
    }
  },
  showIDType() {
      return function(type) {
        console.log(typeof type, type)
        if (type === '1') {
          console.log('身份证')
          return '身份证'
        } else if (type === '2') {
          return '军官证'
        } else if (type === '3') {
          return '护照'
        }
        // switch (type) {
          // case 1:
            // console.log('身份证')
            // return '身份证'
          // case 2:
            // return '军官证'
          // case 3:
            // return '护照'
        // }
      }
    }
 }