Vue过滤器

干啥的?

比如一个大写的过滤器{{message|uppercase}} message是待处理的信息,然后一个竖线,之后uppercase是处理办法。
具体怎么处理在Vue.filter()中定义。

语法

image.png

举个例子

比如,一个大写的过滤器。


<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>

<div id="app">
    {{message|uppercase}}
</div>

<script>
Vue.filter('uppercase', function(value) {
  value = value.toString()
  return value.toUpperCase()
})

var vm = new Vue({
  el:'#app',
  data: {
    message: 'test'
  }
})
</script>

结果

image.png

参考

JavaScript toUpperCase() 方法
vue过滤器在v2.0版本用法 - ShaLiWa的博客 - CSDN博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 10,279评论 0 1
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 4,881评论 1 4
  • 过滤器是个啥? 使用vue的时候,绑定数据时超级方便的,只需要 {{message}}这样既可,但是有时候我们也有...
    小枫学幽默阅读 5,831评论 1 6
  • 目的:处理同一种数据1、基本过滤:小写 {{str|lowercase}} 大写 {{str|uppercase}...
    紫由袅阅读 3,359评论 0 0
  • //货币{{数据 | currency}}//转 大写{{数据 | uppercase}}//转小写{{数据 | ...
    嘬烟盒的程序员阅读 1,891评论 0 0