内容简介:格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等过滤器中的 function 里的第一个参数,已经被规定死了,永远都是 过滤器 管道符前面传递过来的数据。过滤器可以用在两个地方: 插值表达式 和 v-bind 表达式。
目录:
一、过滤器的作用是什么?
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
二、自定义全局过滤器
过滤器中的 function 里的第一个参数,已经被规定死了,永远都是 过滤器 管道符前面传递过来的数据。
Vue.filter(‘过滤器名称’, function(value){ // 过滤器业务逻辑 })
三、 全局过滤器的使用
过滤器可以用在两个地方: 插值表达式 和 v-bind 表达式。
<div>{{msg | upper}}</div> <div>{{msg | upper | lower}}</div> <div v-bind:id=“id | formatId"></div>
// 定义一个全局过滤器 Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否则,就返回 年-月-日 时:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } });
四、局部过滤器
filters:{ capitalize: function(){} }
- HTML元素:
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
-
私有
filters
定义方式:
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用 dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错 var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否则,就返回 年-月-日 时:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } }
五、带参数的过滤器
Vue.filter(‘format’, function(value, arg1){ // arg1就是过滤器传递过来的参数 })
六、带参过滤器的使用
<div>{{date | format(‘yyyy-MM-dd')}}</div>
七、注意事项
- 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示。
- 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
- 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的。
- 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
用户思维+:好产品让用户为自己尖叫
[美] Kathy Sierra / 石航 / 人民邮电出版社 / 2017-9 / 69.00元
畅销产品与普通产品的本质区别是什么?若没有巨额预算、不爱营销噱头、不开奢华的产品发布会,如何打造可持续成功的产品?本书针对上述问题提出了新颖的观点:用户并不关心产品本身有多棒,而是关心使用产品时自己有多棒。作者利用其多年的交互设计经验,生动阐释了这一观点背后的科学。可贵的是,本书并不止步于解释“为什么”,还清晰呈现了“怎么做”。 本书风格活泼、图文并茂,其对话式内容既引人入胜,又引人深思,适......一起来看看 《用户思维+:好产品让用户为自己尖叫》 这本书的介绍吧!