Vue.js每天必学之过滤器与自定义过滤器
发布时间：2020-12-17 03:05:44 所属栏目：百科 来源：网络整理
导读：基础 类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值： 过滤器函数可以接收任意数量的参数： 双向过滤器 目前我们使用过滤器都是在把来自模型的值显
基础类似于自定义指令，可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值： 'cba' -->
过滤器函数可以接收任意数量的参数： 'before hello after' -->
双向过滤器目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器，在把来自视图（ 元素）的值写回模型之前转化它： 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。例如： {{msg | concat userInput}}
上例比较简单，也可以用表达式达到相同的结果，但是对于更复杂的逻辑——需要多于一个语句，这时需要将它放到计算属性或自定义过滤器中。 内置过滤器 filterBy 和 orderBy，根据所属 Vue 实例的当前状态，过滤/排序传入的数组。 本文已被整理到了《》，欢迎大家学习阅读。 关于vue.js组件的教程，请大家点击专题进行学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |