Vue2 全局过滤器(vue-cli)
先看官方简介:
当前组件注册:
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>
Vue2 全局过滤器(vue-cli)的更多相关文章
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- Vue全局过滤器的使用 运用在时间过滤 内容添加crud
过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen Vue.filter("msgFo ...
- vue局部过滤器和全局过滤器
全局过滤器在main.js中写 //注册全局过滤器 Vue.filter('wholeMoneyFormat',(value)=>{ return '¥'+Number(value).toF ...
- 运行vue项目--安装vue脚手架vue cli
第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- Vue Cli 3 初体验(全面详解)
vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
随机推荐
- 2017.10.24 Java 详解 JVM 工作原理和流程
JVM工作原理和特点主要是指操作系统装入JVM是通过jdk中Java.exe来完成,通过下面4步来完成JVM环境. 1.创建JVM装载环境和配置 2.装载JVM.dll 3.初始化JVM.dll并挂界 ...
- 二、OC的构造方法和descriprtion方法
二.构造方法和description方法 1.构造方法的定义 - (id)initWithAge:(int)newAge andNo:(int)newNo; 2.实现构造方法 - (id)initWi ...
- 第10章 新建工程-库函数版—零死角玩转STM32-F429系列
第10章 新建工程—库函数版 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...
- 访问数据库需要注意的问题 c#
在操作数据库的过程中,必然要产生数据库连接,这就要求在使用的时候要及时关闭连接.以避免数据库会话过多的问题. 以Oracle数据库为例: Oracle数据库查看会话,进程的语句 --查询数据库当前进程 ...
- webpack4基本配置
1.npm init 生成package.json文件 2.npm install webpack webpack-cil --save-dev 安装webpack和webpack-cli ...
- 泉五培训Day5
T1 陪审团 题目 [题目描述] 陪审团制度历来是司法研究中的一个热议话题,由于陪审团的成员组成会对案件最终的结果产生巨大的影响,诉讼双方往往围绕陪审团由哪些人组成这一议题激烈争夺.小 W提出了一个甲 ...
- JS获取元素属性和自定义属性
获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...
- kafka单机环境搭建及其基本使用
最近在搞kettle整合kafka producer插件,于是自己搭建了一套单机的kafka环境,以便用于测试.现整理如下的笔记,发上来和大家分享.后续还会有kafka的研究笔记,依然会与大家分享! ...
- Linux基础知识随笔记
linux文件属性 ls -h human-readable以人类可读的形式显示 -i 显示inode号码 [root@oldboyedu55-bjb ~]# ls -ihl total 8.0K 3 ...
- CSS设置背景透明字体不透明
写CSS时给容器设置透明度的时候如果使用background-color: #000000; opacity: 0.5;这时会出现容器里的文字也跟着透明.解决办法是不用十六进制的色值和透明度分开写,使 ...