<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

 </head>

 <body>

 <div id="app">

     <p>{{ msg | msgFormat('mia ', 'san ') | test }}</p>

 </div>

 <div id="app2">

     <p>{{ dt | dateFormat('') }}</p>

 </div>

     <script>

         // 定义一个Vue全局过滤器，名字叫 msgFormat

         Vue.filter('msgFormat',function (msg, arg, arg2) {

             //字符串的replace方法，第一个参数可以是 字符串/正则，g就是全局

             return msg.replace(/aaaaa/g, arg + arg2)

         });

         //可以定义多个

         Vue.filter('test', function (msg) {

            return msg + ' mia'

         });

         // 创建 Vue 实例，得到 ViewModel

         var vm = new Vue({

             el: '#app',

             data: {

                 msg:"Bayern  aaaaa"

             },

             methods: {

             }

         });

         //定义私有的过滤器

         var vm2 = new Vue({

             el: '#app2',

             data: {

                 dt:new Date()

             },

             methods: {

             },

             //过滤器，方法都是对象

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

             filters: {

                 dateFormat: function (dateStr, pattern = '') {

                     var dt = new Date(dateStr);

                     var y = dt.getFullYear();

                     var m = dt.getMonth() + 1;

                     var d = dt.getDate();

                     if (pattern.toLowerCase() === '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}`;

                     }

                 }

             }

         })

     </script>

 </body>

 </html>

vue学习（2）-过滤器的更多相关文章

  1. Vue学习之过滤器和自定义指令小结（三）

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  4. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  5. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  6. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  7. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  9. Vue 学习文档

    Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...

  10. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

随机推荐

  1. linux下如何单独编译设备树？

    答: make <vendor>/<device_name>.dtb 如: make freescale/fsl-1043a-rdb.dtb

  2. react-native关闭所有黄色警告

    写RN经常会遇到黄色警告,很无奈,很多很多的黄色警告都是由组件自己导致的,建议在index.js 内的 AppRegistry.registerComponent('shareFile', () =& ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_3-05 服务注册和发现Eureka Server搭建实战

    笔记 5.服务注册和发现Eureka Server搭建实战     简介:使用IDEA搭建Eureka服务中心Server端并启动,项目基本骨架介绍          官方文档:http://clou ...

  4. IDEA如何构建mybatis

    任何一个软件都要和数据库关联,软件需要的数据都存储在数据库中. 对于经常使用的数据库相关的代码就出现了很多冗余的代码,持久层框架也随之出现. 目前使用比较流程的持久层框架有hibernate和myba ...

  5. openstack核心组件--neutron网络服务（4）

    一.neutron 介绍:   Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要 ...

  6. excel怎么设置密码保护?Excel文件添加密码保护教程

    excel怎么设置密码保护?Excel文件添加密码保护教程 众所周知,Excel具有强大的数据处理和数据分析能力,广泛应用于加工学统计及金融统计中.特别是金融统计需要较高的安全性,那么就一定要为Exc ...

  7. Java集合(3)：使用Abstract类

    每个java.util容器都有其自己的Abstract类,它们提供了该容器接口的部分实现.下面是一个定制自己的Map的例子(List set就省略了): 定制自己的Map实现AbstractMap-- ...

  8. Java集合(1)：Collections工具类中的static方法

    与Arrays一样,Collections类中也有一些实用的static方法. (1) 排序操作 reverse(List list):反转指定List集合中元素的顺序 shuffle(List li ...

  9. Windows 10 删除资源管理器中7个文件夹

    Windows 10 安装完成之后 ,在资源管理器中会存在 7 个文件夹,他们分别是:图片.视频.下载.音乐.桌面.文档.3D对象. 我们可以通过修改注册表的方式,隐藏这7个文件夹.相关注册表内容如下 ...

  10. 20190925 - 在 macOS 下为 vscode 添加 code 命令行

    在 macOS 下为 vscode 添加 code 命令行最简单办法是:Ctrl + Alt + P,安装 Shell Command: Install 'code' command in PATH, ...