new Map使用，根据不同值进行渲染

最新推荐文章于 2025-01-12 13:24:58 发布

原创

最新推荐文章于 2025-01-12 13:24:58 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了如何根据后端返回的错误代码，利用Vue.js的计算属性和Map或对象来动态渲染404错误页面的图标和文字。通过创建一个errorCfg映射或对象，将不同的错误代码与相应的图标和文字对应起来，然后在模板中根据errorCode的值获取并显示对应的错误信息。

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

问题：如果一个404页面有不同的展示，比如详情页的404和个人页的404也许只是文字和图标的不同，我们可以利用new Map根据后端传来的code做出对应的展示。

const errorCfg = new Map([
    [-9106, {
      icon: 'xxx1',
      text: '已删除', 
    }],
    [-9107, {
      icon: 'xx2',
      text: 'id不存在', 
    }],
    [-9108, {
      icon: 'xx3',
      text: '审核中',
    }],
    [-9109, {
      icon: 'xx4',
      text: '审核拒绝',
    }],
  ])
const { errorCode } = toRefs(props). //props 后端的code
const currentError = computed(() => errorCfg.get(errorCode.value))


<template>
  <div
  >
    <img
      :src="currentError.icon"
    />
    <div>
      {
  
  { currentError.text }}
    </div>
  </div>

</template>

或者直接利用对象

const errorCfg = {
    -106: {
        icon: 'xxx1',
        text: '已删除', 
    },
    -107: {
        icon: 'xx2',
        text: 'id不存在', 
    },
    -108: {
        icon: 'xx3',
        text: '审核中', 
    },
    -109: {
        icon: 'xx4',