威斯尼斯人官网Vue.js每天必学之过滤器与自定义过滤器,vue.js自定义过滤器

Vue.js天天必学之过滤器与自定义过滤器,vue.js自定义过滤器

基础

看似于自定义指令,能够用全局方法 Vue.filter(卡塔尔(قطر‎注册七个自定义过滤器,它选取七个参数:过滤器 ID
和过滤器函数。过滤器函数以值为参数,重返转换后的值:

Vue.filter('reverse', function (value) {
 return value.split('').reverse().join('')
})

<!-- 'abc' => 'cba' -->

过滤器函数能够吸收任意数量的参数:

Vue.filter('wrap', function (value, begin, end) {
 return begin + value + end
})

<!-- 'hello' => 'before hello after' -->

双向过滤器

日前我们利用过滤器都是在把来自模型的值呈现在视图以前转变它。可是也得以定义八个过滤器,在把来自视图(<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))
 }
})

威斯尼斯人官网 ,威斯尼斯人官网Vue.js每天必学之过滤器与自定义过滤器,vue.js自定义过滤器。动态参数

要是过滤器参数未有用引号包起来,则它会在前段时间 vm
效用域内动态总计。其它,过滤器函数的 this 始终对准调用它的 vm。比方:

<input v-model="userInput">
{{msg | concat userInput}}

Vue.filter('concat', function (value, input) {
 // `input` === `this.userInput`
 return value + input
})

上例比较轻易,也得以用表达式达到同等的结果,不过对于更头眼昏花的逻辑——供给多于叁个言语,这时候需求将它内置总计属性或自定义过滤器中。

停放过滤器 filterBy 和 orderBy,依照所属 Vue
实例的近来情景,过滤/排序传入的数组。

上述正是本文的全体内容,希望对大家的上学抱有利于,也期望我们多多点拨帮客之家。

底子 相同于自定义指令,可以用全局方法 Vue.filter(State of Qatar注册二个自定义过滤器,它…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章