Vue.js学习 Item14 – 过滤器与自定义过滤器
2016-10-25 15:56
751 查看
基础
类似于自定义指令,可以用全局方法Vue.filter()注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:
Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })
<!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span>
过滤器函数可以接收任意数量的参数:
Vue.filter('wrap', function (value, begin, end) { return begin + value + end })
<!-- 'hello' => 'before hello after' --> <span v-text="message | wrap 'before' 'after'"></span>
双向过滤器
目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器,在把来自视图(<input>元素)的值写回模型之前转化它:
Vue.filter('currencyDisplay', { // model -> view // 在更新 `<input>` 元素之前格式化值 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。例如:
<input v-model="userInput"> <span>{{msg | concat userInput}}</span>
Vue.filter('concat', function (value, input) { // `input` === `this.userInput` return value + input })
上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。
内置过滤器
filterBy和
orderBy,根据所属 Vue 实例的当前状态,过滤/排序传入的数组。
相关文章推荐
- Vue.js学习 Item14 – 过滤器与自定义过滤器
- vue.js学习 自定义过滤器使用(2)
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- vue.js学习 自定义过滤器使用(1)
- Vue.js学习 Item4 -- 数据双向绑定
- Vue.js学习 Item9 – 表单控件绑定
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item9 – 表单控件绑定
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item6 -- Class 与 样式绑定
- Vue.js每天必学之过滤器与自定义过滤器
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js学习 Item15 – 构建大型web应用
- Vue.js学习 Item12 – 内部响应式原理探究
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js学习 Item2 -- 原理概述
- Vue.js学习 Item8 -- 方法与事件处理器
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js学习 Item12 – 内部响应式原理探究
- Vue.js学习 Item8 -- 方法与事件处理器