vue中的全局过滤器与定义私有过滤器

全局过滤器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>过滤器</title>

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

</head>

<body>

    <div class="app">

        <p>{{ msg | myFormat('哈哈哈哈哈') }}</p>

    </div>

    <script>

        Vue.filter('myFormat',function(msg,n) {

            return msg.replace(/一/g,n)

        })

        var vm = new Vue({

            el:'.app',

            data:{

                msg:'我是天下第一帅，我是天下第一美丽，我是天下第一可爱'

            }

        })

    </script>

</body>

</html>

通过vue.filter('过滤器名称'，function（参数）{过滤方式，返回过滤后值})的方式定义一个全局过滤器。

使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}}

replace（‘替换字符’，‘被替换字符’）方法的使用

定义私有过滤器

<script>

var vm= new Vue({  //创建vue实例

            el:'.app',

            data:{

                arr:[

                    {'id':1,'name':'iPhone','time':new Date()},

                    {'id':2,'name':'华为','time':new Date()},

                    {'id':3,'name':'OPPO','time':new Date()}

                ], //创建一些初始数据与格式

                id:'',

                name:'',

                keywords:''  //初始化参数keywords为空

            },

            directives:{

                focus:{

                    inserted:function(el) {

                        el.focus()

                    }

                }

            },//自定义指令

            filters:{

                timeFormat:function (dataStr) {

                    var myData=new Date(dataStr)

                    var y=myData.getFullYear()

                    var m=(myData.getMonth() + 1).toString().padStart(2,'0')

                    var d=myData.getDate().toString().padStart(2,'0')

                    var h=myData.getHours().toString().padStart(2,'0')

                    var mm=myData.getMinutes().toString().padStart(2,'0')

                    var s=myData.getSeconds().toString().padStart(2,'0')

                    return `${y}-${m}-${d} ${h}:${mm}:${s}++++++`

                }

            }//******创建一个私有过滤器******/

        })

</script>

自定义私有过滤器形式：fliters：{过滤器名称：function （）{}}

padStart方法在头部填充字符（字符串独有）实例、：时间字符串填充0

padEnd方法在尾部填充字符串

vue.js（12）--过滤器的更多相关文章

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

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

  2. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  3. 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

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

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

  5. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  6. 最新vue.js完整视频教程12套

    0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+N ...

  7. （12）打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

  8. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  9. Vue.js学习笔记（1）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

随机推荐

  1. Day_04-数组，元组，列表

    # for i in range(5): # for j in range(5): # print(i,j) # import re # def rm(): # a = ' 1 2 3 4 5 ' # ...

  2. php array_push()函数 语法

    php array_push()函数 语法 作用:向第一个参数的数组尾部添加一个或多个元素(入栈),然后返回新数组的长度.博智达 语法:array_push(array,value1,value2.. ...

  3. 软件工程 in MSRA 第一周博客作业

    1. 自我介绍 大家好-我是陈海峰,哈尔滨工业大学计算机学院的一名大四学生,大四开始在 MSRA 的 KC 组进行实习.作为一个标准的"肥宅",对运动没什么兴趣的我,主要的兴趣点就 ...

  4. 01 Netty是什么？

    01 Netty是什么? IO编程 我们简化下场景:客户端每隔两秒发送一个带有时间戳的 "hello world" 给服务端,服务端收到之后打印. 为了方便演示,下面例子中,服务端 ...

  5. nginx 缓存设置

    浏览器缓存原理 浏览器缓存 HTTP协议定义的缓存机制(如:Expires:Cache-control等) 2.浏览器无缓存 3.客户端有缓存 校验过期机制 校验是否过期                ...

  6. Internet History, Technology, and Security（week1）——History: Dawn of Electronic Computing

    前言: 第一次进行课程学习,在反复观看视频和查找字典翻译理解后选出了视频中个人认为较重要的概念,以下并不按照逐句翻译,中文概括大意余下自由发挥,对老师想要告诉我们的历史有一个初步的了解,顺便锻炼以下英 ...

  7. 730KII 打印机 Win7 2017年11月更新系统补丁后无法打印

    卸载11月份编号为KB4048960的系统更新

  8. Solr搜索引擎基础

    搜索引擎是指一个庞大的互联网资源数据库,如网页,新闻组,程序,图像等.它有助于在万维网上定位信息. 用户可以通过以关键字或短语的形式将查询传递到搜索引擎中来搜索信息. 搜索引擎然后搜索其数据库并向用户 ...

  9. Java数据结构与算法(4):二叉查找树

    一.二叉查找树定义 二叉树每个节点都不能有多于两个的儿子.二叉查找树是特殊的二叉树,对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 二叉查找树节点的 ...

  10. 常见的七种Hadoop和Spark项目案例

    常见的七种Hadoop和Spark项目案例 有一句古老的格言是这样说的,如果你向某人提供你的全部支持和金融支持去做一些不同的和创新的事情,他们最终却会做别人正在做的事情.如比较火爆的Hadoop.Sp ...