<!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. Android之SharedPreference存储数据

    *路径: /data/data/包名/shared_prefs/ * 以Xml文件存储数据 * 编写步骤 // 1. 获取sp SharedPreferences sp = this.getShare ...

  2. 11 MySQL之性能优化

    01-优化简介 MySQL数据库优化是多方面的,原则是减少系统瓶颈,减少资源的占用,增加系统的反应速度. 1.通过优化文件系统,提高磁盘I\O的速写速度: 2.通过优化操作系统的调度策略,提高MySQ ...

  3. ExcelUtility 对excel的序列化与反序列化,支持当单元格中数据为空时将属性赋值为指定类型的默认值

    源码https://github.com/leoparddne/EPPlusHelper 安装: Install-Package ExcelUtility -Version 1.1.4 需要为对象添加 ...

  4. mock的使用

    mock的重要性 mock就是对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建的方法.项目开发和测试过程中,遇到以下的情况时,就需要模拟结果返回. 1.当另一方接口或服务还未完成,阻碍项 ...

  5. piggy back是什么意思？

    遇到这么一句话. // Connect the Socket.IO framework up to the web server to piggy back on its connection // ...

  6. 【JVM学习笔记】线程上下文类加载器

    有许多地方能够看到线程上下文类加载的设置,比如在sun.misc.Launcher类的构造方法中,能够看到如下代码 先写一个例子建立感性认识 public class Test { public st ...

  7. 深入解析d3弦图

    记得上次看d3应该是1年前的事情了,当时还一边看一边写了d3(v5.7)的一个学习笔记:https://www.cnblogs.com/eco-just/tag/d3/ 后来转战three.js就没继 ...

  8. vue中如何编写可复用的组件？

    原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...

  9. 【CodeForces - 682C】Alyona and the Tree（dfs）

    Alyona and the Tree Descriptions 小灵决定节食,于是去森林里摘了些苹果.在那里,她意外地发现了一棵神奇的有根树,它的根在节点 1 上,每个节点和每条边上都有一个数字. ...

  10. CSRF类型

    按照请求类型来区分.分为:GET类型和POST类型 按照攻击类型分类,CSRF可分为:HTML CSRF攻击,JSOM HiJacking攻击和FIash CSRF攻击 HTML CSRF攻击 HTM ...