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

本文探讨了在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 '护照'
        // }
      }
    }
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值