VUE.js概述——过滤器

过滤器的本质是一个函数,接受管道符前面的值作为初始值,

同时也能接受额外的参数,返回值为经过处理后的输出值。多个过滤器也可以进行串联。

Vue.js提供了全局方法Vue.filter()注册一个自定义过滤器,接受过滤器ID和过滤器函数两个参数。例如:

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

 if(!value instanceof Date) return value;

 return value.toLocaleDateString();

})

这样注册之后,我们就可以在vm实例的模板中使用这个过滤器了。

<div>

 {{ date | date }}

</div>

var vm = new Vue({

 el : '#app',

 data: {

  date : new Date()

 }

});

除了初始值之外,过滤器也能接受任意数量的参数。

双向过滤器

之前提及的过滤器都是在数据输出到视图之前,对数据进行转化显示,但不影响数据本身。Vue.js也提供了在改变视图中数据的值,写回data绑定属性中的过滤器,称为双向过滤器。

动态参数

过滤器除了能接受单引号('')括起来的参数外,也支持接受在vm实例中绑定的数据,称之为动态参数。使用区别就在于不需要用单引号将参数括起来

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值