UDN-企业互联网技术人气社区

板块导航

浏览  : 461
回复  : 2

[原生js] Vue.js每天必学之过滤器与自定义过滤器

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 13:45:39 | 显示全部楼层 |阅读模式
  Vue.js每天必学之过滤器与自定义过滤器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  基础
  
  类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:
  1. Vue.filter('reverse', function (value) {
  2. return value.split('').reverse().join('')
  3. })

  4. <!-- 'abc' => 'cba' -->
  5. <span v-text="message | reverse"></span>
复制代码
  
  过滤器函数可以接收任意数量的参数:
  1. Vue.filter('wrap', function (value, begin, end) {
  2. return begin + value + end
  3. })


  4. <!-- 'hello' => 'before hello after' -->
  5. <span v-text="message | wrap 'before' 'after'"></span>
复制代码

  双向过滤器
  
  目前我们使用过滤器都是在把来自模型的值显示在视图之前转换它。不过也可以定义一个过滤器,在把来自视图(<input> 元素)的值写回模型之前转化它:
  1. Vue.filter('currencyDisplay', {
  2. // model -> view
  3. // 在更新 `<input>` 元素之前格式化值
  4. read: function(val) {
  5. return '
  6.   [b]动态参数[/b]
  7.   
  8.   如果过滤器参数没有用引号包起来,则它会在当前 vm 作用域内动态计算。另外,过滤器函数的 this 始终指向调用它的 vm。例如:
  9. [code]<input v-model="userInput">
  10. <span>{{msg | concat userInput}}</span>
复制代码
  1. Vue.filter('concat', function (value, input) {
  2. // `input` === `this.userInput`
  3. return value + input
  4. })
复制代码

  上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。
  
  内置过滤器 filterBy 和 orderBy,根据所属 Vue 实例的当前状态,过滤/排序传入的数组。
 
  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
+val.toFixed(2)
},
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})[/code]
  动态参数
  
  如果过滤器参数没有用引号包起来,则它会在当前 vm 作用域内动态计算。另外,过滤器函数的 this 始终指向调用它的 vm。例如:
  1. Vue.filter('concat', function (value, input) {
  2. // `input` === `this.userInput`
  3. return value + input
  4. })
复制代码

[        DISCUZ_CODE_4        ]
  上例比较简单,也可以用表达式达到相同的结果,但是对于更复杂的逻辑——需要多于一个语句,这时需要将它放到计算属性或自定义过滤器中。
  
  内置过滤器 filterBy 和 orderBy,根据所属 Vue 实例的当前状态,过滤/排序传入的数组。
 
  以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关帖子

发表于 2017-1-10 13:46:08 来自手机 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-1-10 13:46:09 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部