使用Vue.filter('过滤器名称'，方法);

1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>  

    </script>

</head>

<body>

    <div id="box">

        {{a | toDou}}

    </div>

    <script>

        Vue.filter('toDou',function(input){

            return input<10?'0'+input:''+input;

        });

        var vm=new Vue({

            data:{

                a:9

            },

            methods:{  

            }

        }).$mount('#box');  

    </script>

</body>

</html>

效果：

2.带参数的自定义过滤器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>  

    </script>

</head>

<body>

    <div id="box">

        {{a | toDou 1 2}}

    </div>

    <script>

        Vue.filter('toDou',function(input,a,b){

            alert(a+','+b);

            return input<10?'0'+input:''+input;

        });

        var vm=new Vue({

            data:{

                a:9

            },

            methods:{  

            }

        }).$mount('#box');  

    </script>

</body>

</html>

3.自定义日期

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>  

    </style>

    <script src="vue.js"></script>

    <script>  

    </script>

</head>

<body>

    <div id="box">

        {{a | date}}

    </div>

    <script>

        Vue.filter('date',function(input){

            var oDate=new Date(input);

            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();

        });  

        var vm=new Vue({

            data:{

                a:Date.now()

            },

            methods:{  

            }

        }).$mount('#box');  

    </script>

</body>

</html>

Vue之自定义过滤器的更多相关文章

  1. vue 自定义过滤器

    vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}}   <!-- 在 ...

  2. 第六节：Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

  3. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  4. Vue.js学习 Item14 – 过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('re ...

  5. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  6. vue.js学习 自定义过滤器使用（2）

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  7. vue.js学习 自定义过滤器使用（1）

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

  8. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  9. VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...

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

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

随机推荐

  1. 如何将视频文件.h264和音频文件.mp3复用为输出文件output.mp4?

    一.初始化复用器 在这个部分我们可以分三步进行:(1)打开输入视频文件上下文句柄 (2)打开输入音频文件上下文句柄 (3)打开输出文件上下文句柄 1.打开输入视频文件上下文句柄 在这一步,我们主要用到 ...

  2. 自研ORM 子查询&嵌套查询

    作者 Mr-zhong 代码改变世界.... 一.前言 Fast Framework 基于NET6.0 封装的轻量级 ORM 框架 支持多种数据库 SqlServer Oracle MySql Pos ...

  3. ES插入数据（JAVA代码）

    创建ES连接 // 初始化api客户端 public static RestHighLevelClient client = new RestHighLevelClient( RestClient.b ...

  4. Button按钮：得到鼠标焦点后自动放大，失去鼠标焦点后自动缩小_

    作用 程序设计过程中,我们经常需要增加一些动态效果,以此改善用户的使用体验.本文将介绍一种方法,动态显示按钮状态,使其得到鼠标焦点后自动放大,失去鼠标焦点后自动缩小. 效果图 先放一张原图(鼠标还未移 ...

  5. Django+DRF+Vue 网页开发环境安装（windows/Linux）

    博客地址:https://www.cnblogs.com/zylyehuo/ 总览 一.安装 Django pip install django==3.2 二.安装 MySQL 驱动程序 pip in ...

  6. 合并两个不同远程仓库的Git命令

    一.需求场景描述 远程仓库A:http://XXXA.git 远程gitlab,团队协作开发主仓库,新仓库 远程仓库B:http://XXXB.git 旧仓库 从A仓库和B仓库,都对同一个项目进行过开 ...

  7. 使用MkDocs搭建个人博客

    使用MkDocs搭建个人博客 接触编程已经好几年了,阅读了无数大佬的博客文章,但是从来没有自己写过.这其中最重要的原因当然是懒惰,觉得写博客太费时间了,对自己的帮助也不大.可是如今发现自己的记性越来越 ...

  8. [git]基于GitLab搭建本地Git服务

    0.准备 (如果选择docker安装)Docker 系统:CentOS 7 1.安装部署GitLab 1.1.使用docker安装中文社区版GitLab 在docker上发现一个中文版的gitlab, ...

  9. 【pandas小技巧】--字符串转数值

    字符串转数字的用途和场景很多,其中主要包括以下几个方面: 数据清洗:在进行数据处理时,经常会遇到一些数据类型不匹配的问题,比如某些列中的字符串类型被误认为是数字类型,此时需要将这些字符串类型转换为数字 ...

  10. SRC赏金猎人—笔记一

    以下是我如何将 webshell 上传到一个旧目标中, 这是使用谷歌dorks,Js检查和文件上传过滤器绕过. 过程 1.我随机选择了一个范围很大的目标开始 2.我启动了自动化脚本来发现使用的技术.d ...