先看官方简介:

当前组件注册:

export default {
data () {
return {}
},
filters:{
orderBy (){
// doSomething
},
uppercase () {
// doSomething
}
}
}

但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,嗯,还是抽成全局的会更好些。

全局注册:(官网https://cn.vuejs.org/v2/api/#filters

 // 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
}) // getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

当项目所用到的过滤器比较多时,就想试着把所有的方法定义在一个文件里面导出,嗯,毕竟还是有分点层次的。

/src/common/filters/custom.js

let dateServer = value => {
return value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')
}
export { dateServer }

/src/main.js

import * as custom from './common/filters/custom'

Object.keys(custom).forEach(key => {
Vue.filter(key, custom[key])
})

然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

<template>
<section class="content">
<p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
</section>
</template>
<script>
export default {
data () {
return {
time: 20160101
}
}
}
</script>
——————分割线:2017年7月18日
Demo示例请点击这里查看。
 

Vue2 全局过滤器(vue-cli)的更多相关文章

  1. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  2. Vue全局过滤器的使用 运用在时间过滤 内容添加crud

    过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen     Vue.filter("msgFo ...

  3. vue局部过滤器和全局过滤器

    全局过滤器在main.js中写 //注册全局过滤器 Vue.filter('wholeMoneyFormat',(value)=>{   return '¥'+Number(value).toF ...

  4. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  5. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  6. Vue Cli 3 初体验(全面详解)

    vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...

  7. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  8. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  9. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

随机推荐

  1. 2018.8.19 mybatis 环境搭建---配置mysql 。(Windows环境下面)

    安装mysql Install/Remove of the Service Denied!错误的解决办法 在windos 的cmd下安装mysql 在mysql的bin目录下面执行: mysqld - ...

  2. mysql关键字了解

    unsigned  无符号 就是没有负数 列-1  -2 auto_increment 自增 comment 注释 primary key 主键 foreign key ()   references ...

  3. javascript入门笔记7-计时器

    计时器 语法: setInterval(代码,交互时间) 参数说明: 代码:要调用的函数或要执行的代码串. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms). 例子: & ...

  4. Servlet的工作原理和生命周期

    Servlet的工作原理 . Web服务器加载Servlet:Web服务器启动后,它会根据每个工程的web.xml文件去查找该工程的Servlet,并且找到这些Servlet的Class文件所在的地址 ...

  5. vscode + leetcode +github 同步

    1.用VScode打开本地leetcode文件夹 C:\Users\Administrator\.leetcode 2.上传到本地git库 3.打开github桌面,上传到远程库

  6. Java中堆、栈,静态方法和非静态方法的速度问题

           一.堆和栈的速度性能分析 堆和栈是JVM内存模型中的2个重要组成部分,自己很早以前也总结过堆和栈的区别,基本都是从存储内容,存储空间大小,存储速度这几个方面来理解的,但是关于堆和栈的存储 ...

  7. 汉罗塔问题——Python

    汉罗塔问题就是一个循环的过程:* (有两种情况) 如果被移动盘只有一个盘子,可以直接移动到目的盘 但是被移动盘有多个盘子,就先需要将上面的n-1个盘子通过目的盘移动到辅助盘,然后将被移动盘最下面一个盘 ...

  8. B1016 部分A+B (15分)

    B1016 部分A+B (15分) 输入格式: 输入在一行中依次给出 A.DA.B.DB,中间以空格分隔,其中 \(0<A,B<10^10\). 输出格式: 在一行中输出 PA+PB的值. ...

  9. 吴恩达DeepLearning 第一课第四周随笔

    第四周 4.1深度神经网络符号约定 L=4______(神经网络层数)   4.2 校正矩阵的维数 校正要点:,, dZ,dA,dW,db都与它们被导数(Z,A,W,b)的维数相同 4.3 为什么使用 ...

  10. 20145202 《Java程序设计》第四周学习总结

    继承:打破了封装性 extends 1.提高了代码的复用性. 2.让类与类之间产生了关系,有了这个关系,才有了多态的特性. 3.必须是类与类之间有所属类关系才可以继承. 4.java只支持单继承不支持 ...