基础
类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:
rush:js;">
Vue.filter('reverse',function (value) {
return value.split('').reverse().join('')
})
rush:xhtml;">
rush:js;">
Vue.filter('wrap',function (value,begin,end) {
return begin + value + end
})
rush:xhtml;">
双向过滤器
目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器,在把来自视图( 元素)的值写回模型之前转化它:
view
// 在更新 `` 元素之前格式化值
read: function(val) {
return '$'+val.toFixed(2)
},// view -> model
// 在写回数据之前格式化值
write: function(val,oldVal) {
var number = +val.replace(/[^\d.]/g,'')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
动态参数
如果过滤器参数没有用引号包起来,则它会在当前 vm 作用域内动态计算。另外,过滤器函数的 this 始终指向调用它的 vm。例如:
rush:xhtml;">
{{msg | concat userInput}}
rush:js;">
Vue.filter('concat',input) {
// `input` === `this.userInput`
return value + input
})
上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。
内置过滤器 filterBy 和 orderBy,根据所属 Vue 实例的当前状态,过滤/排序传入的数组。
本文已被整理到了《》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。