Vue过滤器简介

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器分为全局过滤器和私有过滤器。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道 “|” 符号指示；

定义全局过滤器：

全局过滤器对所有的vue对象实例都是有效的

<html>
<head><script src="~/Scripts/vue.js"></script>
</head>
<body><div id="app"><p>{{msg | msgFormat}}</p> <!--不带参数的过滤器--><p>{{msg | msgFormat2('单纯','可爱')}}</p> <!--带参数的过滤器--><p>{{gender.toString() | msgFormat2('1','男') }}</p><input type="text" v-bind:value="gender.toString() | msgFormat2('1','男') "/></div><script>//定义个Vue全局过滤器，名字叫msgFormat//关于function参数的介绍如下：//参数msg是 <p>{{msg | msgFormat}}</p>中的msgVue.filter("msgFormat", function (msg) {//return msg.replace('单纯', '调皮'); //这样只能替换最最前面的那个“调皮”后面的单纯无法替换//replace支持正则，第一个参数除了可以写一个字符串外，还可以定义一个正则，所以我们可以用正则来替换//正则简写//return msg.replace(/单纯/g, '调皮')//正则详写var reg = new RegExp("单纯", 'g');//g表示全局匹配return msg.replace(reg, "调皮");})//定义个Vue全局过滤器，名字叫msgFormat2//关于function参数的介绍如下：//第一个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msg//第二个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msgFormat2方法的第一个参数//第二个参数是 <p>{{msg | msgFormat2('单纯','可爱')}}</p>中的msgFormat2方法的第二个参数Vue.filter("msgFormat2", function (msg, souParam, resParam) {var reg = new RegExp(souParam, 'g');//g表示全局匹配return msg.replace(reg, resParam);})var vm = new Vue({el: "#app",data: {msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问题，谁是这个世界上最单纯的人',gender:1},methods: {}})</script>
</body>
</html>

案例：定义个全局过滤器，用来格式化日期

<html>
<head><script src="~/Scripts/vue.js"></script><!--moment日期格式化的库：地址：momentjs.cn--><script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
</head>
<body><div id="app"><h2>显示格式化的日期时间</h2><p>{{ dataTime | dataFormat2}}</p> <!--不带参数的过滤器--><p>完整版：{{dataTime | dataFormat3}}</p> <!--dataFormat3中设定默认就是完整的时间格式--><p>年月日：{{dataTime | dataFormat3('YYYY-MM-DD')}}</p> <!--带参数的过滤器--><p>年月日：{{dataTime | dataFormat3('YYYY年MM月DD日')}}</p> <!--带参数的过滤器--><p>时分秒：{{dataTime | dataFormat3('HH:mm:ss')}}</p> <!--带参数的过滤器--></div><script>//定义个Vue全局过滤器，名字叫dataFormatVue.filter("dataFormat", function (dataStr) {var dt = new Date(dataStr);var y = dt.getFullYear();var m = dt.getMonth() + 1;var d = dt.getDay()-1;//return y + '-' + m + '-' + d;//js使用占位符替换字符串是一个ES6中的模版字符串语法。  在``中使用 ${}//``是Tab键上面的那个键//return `${y}-${m}-${d}`; //值为2019-1-3//假设我们想得到的值为 2019-01-03呢？这就涉及到一个不满足2位补0的问题//在ES6中的字符串新增了两个方法//String(prototype, padStart(maxLength, fillString = '')) 在字符串的前面补数据//String(prototype, padEnd(maxLength, fillString = ''))   在字符串的后面补数据var newM = m.toString().padStart(2, '0');var newD = d.toString().padStart(2, '0');return `${y}-${newM}-${newD}`; //这样就得到了我们的需要的格式：2019-01-03})//定义个Vue全局过滤器，名字叫dataFormat2Vue.filter("dataFormat2", function (dataStr) {var dt = new Date(dataStr);var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = (dt.getDay()-1).toString().padStart(2, '0');return `${y}-${m}-${d}`; //这样就得到了我们的需要的格式：2019-01-03})//定义个Vue全局过滤器，名字叫dataFormat3//根据我们自己定义的模板来格式化日期（moment函数是引用的moment.js中的函数）Vue.filter("dataFormat3", function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr).format(pattern)})var vm = new Vue({el: "#app",data: {dataTime: new Date()//dataTime的值的格式为："2019-01-02T06:10:01.971Z" 格式的，所以需要格式化下},methods: {}})</script>
</body>
</html>

定义私有过滤器

私有过滤器，只能作用于vue实例所绑定的el元素

<html>
<head><script src="~/Scripts/vue.js"></script><!--moment日期格式化的库：地址：momentjs.cn--><script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script>
</head>
<body><div id="app"><h2>显示格式化的日期时间</h2><!--dataFormat过滤器可带参数，也可以不带参数，默认是完整的日期格式'YYYY-MM-DD HH:mm:ss'--><p>完整版：{{dataTime | dataFormat}}</p><p>年月日：{{dataTime | dataFormat('YYYY-MM-DD')}}</p> <!--带参数的过滤器--><p>年月日：{{dataTime | dataFormat('YYYY年MM月DD日')}}</p> <!--带参数的过滤器--><p>时分秒：{{dataTime | dataFormat('HH:mm:ss')}}</p> <!--带参数的过滤器--><p>年月日：{{dataTime|dataFormat2}}</p> <!--不带参数的过滤器--></div><script>var vm = new Vue({el: "#app",data: {dataTime: new Date()//dataTime的值的格式为："2019-01-02T06:10:01.971Z" 格式的，所以需要格式化下},methods: {},filters: {  //filters中是定义我们的私有过滤器的地方//定义一个名字为dataFormat过滤器dataFormat: function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr).format(pattern)},//定义一个名字为dataFormat2过滤器dataFormat2: function (dataStr) {var dt = new Date(dataStr);var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0');var d = (dt.getDay() - 1).toString().padStart(2, '0');return `${y}-${m}-${d}`;}}})</script>
</body>
</html>

Vue过滤器：第二天相关推荐

Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...
Vue过滤器的介绍和使用
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由"管道&quo ...
一个简单的Vue过滤器
一个简单的Vue过滤器什么是过滤器: 是一种数据处理的方式,它并不是一定需要使用的. 如果不用过滤器的话,用 methods 或者 computed 配置项也可以实现. 演示一个简单的过滤器,把时间 ...
Vue过滤器的几种用法
Vue过滤器的几种用法本文主要介绍Vue项目中filter的几种用法. 一. 单独在组件或者是页面中使用单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind ...
Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本.在很多不同的情况下,过滤器都是有用的,比如尽 ...
Vue过滤器的传参使用及案例
Vue过滤器的传参使用及案例过滤器用于一些常见的文本格式化过滤器的第二个参数为可选使用位置过滤器可以用在两个地方:双花括号插值{{ }}和 v-bind 表达式** 使用方法 {{ 变量 | ...
关于vue过滤器的原理解析
又来学习源码系列,今天就看一下vue中的过滤器具体是怎么实现的,我觉得这是一个不常用但是很重要的知识点,开冲! 01 前言过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用 ...

Vue过滤器：第二天

Vue过滤器简介

定义全局过滤器：

案例：定义个全局过滤器，用来格式化日期

定义私有过滤器

Vue过滤器：第二天相关推荐

最新文章

热门文章