过滤器

字母操作:capitalize(首字母大写)、uppercase(所有字母大写)、lowercase(小写)

{{ 'ddfe'  |  capitalize }}   //Ddfe


json过滤器:类似调用 JSON.stringify()

<pre>{{didiFamily | json 4}} </pre>   //以4个空格的缩进打印一个对象, 如果不输入4,默认为2


数组过滤器: limitBy/filterBy/orderBy

<div v-for="item in items | limitBy 10"></div>  //只显示前10个元素, 第二个参数不写默认0

  <div v-for="item in items | limitBy 10"></div> //显示第5到15个元素

<div v-for="item in items | filterBy 'hello'">  //如果第一个参数是字符串,返回包含该字符串的元素组成的数组, 只显示包含hello字符串的元素

<div v-for="item in items | filterBy 'ddfe' in 'name' ">  //如果item是一个对象,过滤器将递归在它所有属性中搜索。过滤器只在用户对象的name属性(多个属性空格隔开)中搜索ddfe    ddfe也可以是动态绑定

<div v-for="item in items | orderBy 'ddfe' 'name'  1">  //1为默认值,升序排列  <0为降序, 按照键先后顺序


currency过滤器

将数字值转换为货币形式输出。 第一个参数为货币符号,默认为$,第二个参数为小数位,默认2位

Vue.filter('reverse', function(value) ){ return value.split('').reverse().join('')}  //自定义过滤器,注册一个名为reverse的过滤器,作用是讲字符串反转输出. 第二个参数为具体的过滤器函数,过滤器函数以值为参数,返回转换后的值

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 1,280评论 1赞 4
  • 在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务...
    否冷_阅读 854评论 0赞 5
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 5,004评论 0赞 1
  • 转载文章 angularjs 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回...
    飞将军阅读 719评论 0赞 2
  • 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建...
    oWSQo阅读 1,276评论 0赞 5

友情链接更多精彩内容