Vue从入门到精通-06-自定义过滤器：时间格式化举例【万字长文，感谢支持】

最新推荐文章于 2024-07-25 15:19:10 发布
最新推荐文章于 2024-07-25 15:19:10 发布
阅读量1.1k 收藏 15
点赞数 18
分类专栏： Vue教程 文章标签： vue.js 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76926204/article/details/138387869
版权

前言

我们接着上一篇文章01-04来讲。

过滤器的概念

概念：Vue.js 允许我们自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值表达式、 v-bind表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示。

Vue1.X中的系统过滤器

Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，这些过滤器称之为系统过滤器。

系统过滤器是Vue1.0中存在的，在Vue2.0中已经删除了。

系统过滤器的使用，可以参考参考文档：http://v1-cn.vuejs.org/api/#过滤器

Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。我们接下来讲一讲。

自定义全局过滤器

文档地址：自定义过滤器 - vue.js

全局过滤器的基本使用

我们可以用全局方法Vue.filter()自定义一个全局过滤器。这样的话，每一个Vue的对象实例（每一个VM实例）都可以拿到这个过滤器。它接收两个参数：过滤器的名称 、过滤器函数。

比如说，我要将曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人这句 msg 中的“单纯”改为“邪恶”。可以这样做：

（1）在插值表达式中这样调用：

         <p>{{ msg | msgFormat }</p>

上方代码的意思是说：

  • 管道符前面的msg：要把 msg 这段文本进行过滤，

  • 管道符后面的msgFormat：是通过msgFormat这个过滤器进行来操作。

（2）定义过滤器msgFormat：

         // Vue.filter 中的第一个参数是过滤器的名称，第二个参数是具体的过滤器函数
         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
         Vue.filter('msgFormat', function (myMsg) {  // function 的第一个参数指的是管道符前面的 msg
             // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
             return myMsg.replace(/单纯/g, '邪恶')
         })

上方代码解释：

  • Vue.filter(‘过滤器的名称’, 具体的过滤器函数)中的第一个参数指的就是过滤器的名称（必须和管道符后面的名称完全一致），第二个参数是具体的过滤器函数

  • 过滤器函数function中，第一个参数指的管道符前面的msg。

  • replace()方法是用来做字符串的替换的。第一个参数如果只写成单纯，那么就会只修改 msg 中的第一个单纯字样。所以这里就用正则去匹配msg 中所有的单纯字样。

最终，完整版代码如下：

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
         <p>{{ msg | msgFormat }}</p>
     </div>
 ​
     <script>
         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
         Vue.filter('msgFormat', function (myMsg) {
             // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
             //将 myMsg 中的所有`单纯`字样，修改为`邪恶`
             return myMsg.replace(/单纯/g, '邪恶')
         })
 ​
         // 创建 Vue 实例，得到 ViewModel
         var vm = new Vue({
             el: '#app',
             data: {
                 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
             },
             methods: {}
         });
     </script>
 </body>
 ​
 </html>

网页显示效果如下：

给过滤器添加多个参数

上面的举例代码中，{{ msg | msgFormat }}中，过滤器的调用并没有加参数，其实它还可以添加多个参数。

接下来，我们在上面的举例代码中进行改进。

改进一：过滤器加一个参数。如下：

将 msg 这个字符串中的“单纯”改为 xxx 变量。代码如下：

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <!-- 【重要】通过 过滤器 msgFormat 对 msg 进行过滤。括号里的参数代表 function中的 arg2-->
         <p>{{ msg | msgFormat('xxx') }}</p>
 ​
     </div>
 ​
     <script>
         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
         Vue.filter('msgFormat', function (myMsg, arg2) {
             // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为上面的xxx
             //将 myMsg 中的所有`单纯`字样，修改为 arg2
             return myMsg.replace(/单纯/g, arg2)
         })
 ​
         // 创建 Vue 实例，得到 ViewModel
         var vm = new Vue({
             el: '#app',
             data: {
                 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
             },
             methods: {}
         });
     </script>
 </body>
 ​
 </html>
 ​

注意代码中那行重要的注释：括号里的参数代表 function中的 arg2。

改进二：过滤器加两个参数。如下：

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <!-- 通过 过滤器 msgFormat 对 msg 进行过滤-->
         <!-- 【重要】括号里的第一个参数代表 function 中的 arg2，括号里的第二个参数代表 function 中的 arg3-->
         <p>{{ msg | msgFormat('【牛x】', '【参数arg3】') }}</p>
 ​
     </div>
 ​
     <script>
         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
         Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
             // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx
             //将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`
             return myMsg.replace(/单纯/g, arg2 + arg3)
         })
 ​
         // 创建 Vue 实例，得到 ViewModel
         var vm = new Vue({
             el: '#app',
             data: {
                 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
             },
             methods: {}
         });
     </script>
 </body>
 ​
 </html>

效果如下：

改进3：同时使用多个过滤器

对 msg 同时使用多个过滤器。例如：

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <!-- 通过 两个过滤器（msgFormat、myFilter2）对 msg 进行过滤-->
         <!-- 将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理-->
         <p>{{ msg | msgFormat('【牛x】', '【参数arg3】') | myFilter2}}</p>
 ​
     </div>
 ​
     <script>
         // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
         Vue.filter('msgFormat', function (myMsg, arg2, arg3) {
             // 字符串的  replace 方法：第一个参数，除了可写一个 字符串之外，还可以定义一个正则；第二个参数代表要替换为 xxx
             //将 myMsg 中的所有`单纯`字样，修改为`arg2 + arg3`
             return myMsg.replace(/单纯/g, arg2 + arg3)
         })
 ​
         //定义第二个全局过滤器
         Vue.filter('myFilter2', function (myMsg) {
             //在字符串 msg 的最后面加上【后缀】
             return myMsg + '【后缀】'
         })
 ​
         // 创建 Vue 实例，得到 ViewModel
         var vm = new Vue({
             el: '#app',
             data: {
                 msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
             },
             methods: {}
         });
     </script>
 </body>
 ​
 </html>

效果如下：

上方代码中，添加了多个过滤器，实现的思路是：将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理 。

举例1：时间格式化

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         {{ time }}
         <br /> {{ time | datefmt }}
     </div>
 ​
     <div id="app1">
         {{ time | datefmt }}
     </div>
 </body>
 <script>
 ​
     // 定义一个名称为 datafmt的全局过滤器
     Vue.filter('datefmt', function (input) {
         // 过滤器的逻辑：将input的值格式化成 yyyy-MM-dd 字符串输出
         var res = '';
         var year = input.getFullYear();
         var month = input.getMonth() + 1;
         var day = input.getDate();
 ​
         res = year + '-' + month + '-' + day;
 ​
         return res;
     });
 ​
     new Vue({
         el: '#app1',
         data: {
             time: new Date()
         }
     })
 ​
     new Vue({
         el: '#app',
         data: {
             time: new Date()
         }
     });
 </script>
 ​
 </html>

运行效果：

举例2：时间格式化

上面的举例1，时间格式化的过滤器，我们还有个更高端的写法：（字符串模板）

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script src="vue2.5.16.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         2018-05-25T14:06:51.618Z
         <br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
     </div>
 ​
 </body>
 <script>
 ​
     Vue.filter('dateFormat', function (dateStr, pattern = "") {
         // 根据给定的时间字符串，得到特定的时间
         var dt = new Date(dateStr)
 ​
         //   yyyy-mm-dd
         var y = dt.getFullYear()
         var m = dt.getMonth() + 1
         var d = dt.getDate()
 ​
         // return y + '-' + m + '-' + d
 ​
         if (pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  yyyy-mm-dd 的格式写
             //这里用的是字符串模板
             return `${y}-${m}-${d}`
         } else {  //否则（比如说调用过滤器时不写参数），后面就补上 时-分-秒
             var hh = dt.getHours()
             var mm = dt.getMinutes()
             var ss = dt.getSeconds()
 ​
             return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
         }
     })
 ​
     new Vue({
         el: '#app',
         data: {
             time: new Date()
         }
     });
 </script>
 ​
 </html>

运行结果：

【荐】举例2的改进：（字符串的padStart方法使用）

上图中，我们可以看到，箭头处的时间有些问题，比如说，6要写成06更合适。为了实现这个功能，我们可以这样做：

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串。 pad在英文中指的是补充。

实现举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        2018-05-25T14:06:51.618Z
        <br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
    </div>

</body>
<script>

    Vue.filter('dateFormat', function (dateStr, pattern) {
        // 根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr)

        //   yyyy-mm-dd
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDate().toString().padStart(2, '0')

        if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  yyyy-mm-dd 的格式写
            //这里用的是字符串模板
            return `${y}-${m}-${d}`
        } else { //否则（比如说调用过滤器时不写参数），后面就补上 时-分-秒
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
        }
    })

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        }
    });
</script>

</html>

运行效果如下：

pattern参数的解释：

在做if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd')这个判断时，逻辑是：先保证pattern参数传进来了，然后继续后面的判断。

我们不能写成：if (pattern.toLowerCase() === 'yyyy-mm-dd')。因为，万一在调用的时候，不传递参数pattern，那么 if语句就相当于if (undefined.toLowerCase() === 'yyyy-mm-dd')，就会报错。

当然，ES6中有个新特性叫“默认参数”，我们就可以这样写：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        2018-05-25T14:06:51.618Z
        <br /> {{ '2018-05-25T14:06:51.618Z' | dateFormat }}
    </div>

</body>
<script>

    Vue.filter('dateFormat', function (dateStr, pattern = '') {
        // 根据给定的时间字符串，得到特定的时间
        var dt = new Date(dateStr)

        //   yyyy-mm-dd
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDate().toString().padStart(2, '0')

        if (pattern.toLowerCase() === 'yyyy-mm-dd') { //如果调用过滤器的参数写的是 yyyy-mm-dd，那就按照这种  yyyy-mm-dd 的格式写
            //这里用的是字符串模板
            return `${y}-${m}-${d}`
        } else { //否则（比如说调用过滤器时不写参数），后面就补上 时-分-秒
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')

            return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
        }
    })

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        }
    });
</script>

</html>

自定义私有过滤器

私有过滤器：在某一个 vue 对象内部定义的过滤器称之为私有过滤器。这种过滤器只有在当前vue对象的el指定的监管区域有用。

举例：日期格式化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue2.5.16.js"></script>
</head>

<body>
    <div id="app">
        {{ time }}
        <br />
        {{ time | datefmt }}
    </div>

</body>
<script>

    new Vue({
        el: '#app',
        data: {
            time: new Date()
        },
        //在某一个vue对象内部定义的过滤器称之为私有过滤器，
        //这种过滤器只有在当前vue对象el指定的监管的区域有用
        filters: {
            // input是自定义过滤器的默认参数，input的值永远都是取自于 | 左边的内容
            datefmt: function (input) {
                // 定义过滤器的内容：将input的值格式化成 yyyy-MM-dd 字符串输出
                var res = '';
                var year = input.getFullYear();
                var month = input.getMonth() + 1;
                var day = input.getDate();

                res = year + '-' + month + '-' + day;

                return res;
            }
        }
    });
</script>

</html>

上面的代码中，我们在vue实例中，通过filters关键字，在里面定义了一个局部过滤器datefmt。

运行结果：

第一行代码显示的是默认的date。第二行代码显示的是格式化之后的date，说明过滤器是起到了作用的。

总结

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器。

axios

axios是在Vue中专门用来发送ajax请求的。

但是，axios并不依赖于Vue.js库，而是基于promise的。

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

被瞧不起的神
关注
  • 18
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
综合架构web服务之nginx详解
embelfe_segge的博客
03-07 341
文章目录 nginx 服务配置详细介绍 关于作者 前言 一、nginx web 入门简介 1.1 什么是nginx 1.2 常见的网站服务 1.3 nginx 网站服务特点 1.4 网站页面访问原理 二、nginx 服务部署安装 2.1实验环境 2.2 YUM 安装 2.3 源码编译安装 2.4 nginx重要文件目录结构 2.5 虚拟主机介绍及配置 2.5.1利用nginx服务搭建一个网站(www) 2.5.2 location介绍、location 访问控制及 优雅404显示 2.
Vue超详宝典-上部(万字长文--硬核发布)
weixin_51787261的博客
07-26 402
采用组件化模式，提高代码复用率，且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点数据直接转换成真实domVue的实现过程是先将数据转换为虚拟dom(将数据放在内存中)再将真实dom转换为真实dom但是新的虚拟dom会和旧的dom进行比较定义一个v-bing指令和v-text指令功能类似，但是会把绑定的数值放大十倍...
你要知道的vue面试题汇总（万字长文持续更新！！！！！）
qq_43182723的博客
05-23 3240
vue 面试题总结 1. vue和react的区别 => 相同点： 1. 数据驱动页面，提供响应式的试图组件 2. 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范 3. 数据流动单向，都支持服务器的渲染SSR 4. 都有支持native的方法，react有React native， vue有wexx => 不同点： 1.数据绑定：Vue实现了双向的数据绑定，react数据流动是单向的 2.数据渲染：大
「查漏补缺」2020 截止9月2日 秋招前端面试经历 （已整理答案）
超逸の学习技术博客
09-02 2430
成功是一个过程，并不是一个结果。励志做一位优秀的前端博主，今天分享最近的面试记录（含答案）
【八股】2024春招八股复习笔记3（测试、运维、安全、游戏、客户端）
小哈里的博客
03-27 2671
1、测试开发 2、运维开发 SRE 3、安全开发 4、运营开发/应用开发（全栈） 5、客户端：PC & 移动 & 游戏 我有一个问题，既然测试、运维、安全、运营、客户端都要会开发，同时还要会很多专业领域的知识，但是待遇和职业发展却都远远不如开发。那为什么不直接投业务开发呢（好吧可能是太卷了） 1、测试开发 1、网络 & 系统（含linux） 2、数据库，MySQL，JAVA 3、测试流程：单元测试、集成测试、系统测试 【八股】2024春招八股复习笔记3（测试、运维、安全、游戏、客户端）
代码知识点
wangzilong8的博客
10-16 1766
https://juejin.im/post/5dafb263f265da5b9b80244d JS&基础知识篇： 1、事件流 分为捕获型、冒泡型，addEventListener的第三个参数，为true是捕获型，为false是冒泡型（即默认不写是冒泡型） 常用的事件：click、mouseover（支持冒泡）、mouseout（支持冒泡）、mouseenter（不支持冒...
Vue-Cli中自定义过滤器的实现代码
08-29
在Vue CLI环境中，自定义过滤器是扩展Vue.js应用程序功能的一种常见方法，特别是在Vue 2.x版本中，因为内置过滤器已经被移除。过滤器主要用于数据格式化，例如日期、货币等，使得输出更加人性化。以下是如何在Vue ...
vue-i18n-loader：用于自定义块的vue-i18n-loader
02-06
用于自定义块的vue-i18n加载程序 注意： :warning: next分支是Vue 3的开发分支！ 稳定版现已在分支中！ 状态：测试版 :star: 产品特点 i18n资源预编译 i18n自定义块 i18n资源定义 i18n资源导入 i18n资源定义的语言...
vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' Vue . use ( vueCustomElement ) ; 要使用vue-cli构建Web组件，必须...
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 502
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 394
Python Formulas库，JSON格式导出导入。
vue3——利用自定义指令实现下拉框分页懒加载
zmy967131的博客
07-24 362
vue3——利用自定义指令实现下拉框分页懒加载
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 347
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 780
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 341
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 456
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
vue zip文件下载请求封装与使用
Anlittlecat的博客
07-23 376
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }这里把响应超时时间注释是文件下载接口返回需要较长时间。axios封装（重点是响应拦截）
Vue-cli4快速入门与实战：从概念到项目搭建
Vue-cli可以帮助开发者自动化处理项目初始化工作，包括但不限于设置Webpack配置、热重载、源码映射、静态资源处理等。这样，开发者可以更专注于编写实际业务逻辑，而不用关心底层构建系统的配置细节。Vue-cli是行业...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被瞧不起的神

谢谢啦，感谢支持|一起努力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值