vue3的计算属性传参

写在前言，计算属性return fun没有缓存的作用了，建议直接写method

Vue2

场景大概是我写了一个贼鸡儿基础的upload组件，然后这个给showList是上传到服务器并且返回了各种上传文件信息的数组列表，如果上传的是图片，我就让他回显图片，不是图片格式我就让他显示默认图片

template

script

computed: {
    isImg(){
      return function(item){通过返回闭包
        return this.checkFileType(item)//接受item.url
      }
    }
  },

checkFileType(fileName) { //判断是否是图片
      //用文件名name后缀判断文件类型 
      if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileName)) {
        return false;
      } else {
        return true;
      }
  }

Vue3

场景也是上传文件，上传文件后根据文件的后缀给他添加一个图标实现什么类型的文件，也是v-for循环把每个item的属性传进去,然后根据不同的类型返回不同的类名，就可以引入element不同的icon图标

    

    
    

    
        {{ item.name }}
        ...
     

const getTodo = computed(() => (name) => {
        if (/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(name)) {
          return 'el-icon-picture-outline';
        }
        if (/\.(docx|doc|DOCX|DOC|pdf|PDF|xlsx)$/.test(name)) {
          return 'el-icon-document';
        }
        if (/\.(VIDEO|video)$/.test(name)) {
          return 'el-icon-video-camera';
        }
        if (/\.(MP4|mp4)$/.test(name)) {
          return 'el-icon-video-play';
        }
        if (/\.(TXT|txt)$/.test(name)) {
          return 'el-icon-notebook-2';
        }
        if (/\.(RAR|rar)$/.test(name)) {
          return 'el-icon-files';
        }
        return 'none-display';
    });