欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解vue过滤器在v2.0版本用法

程序员文章站 2022-06-14 13:55:37
1.x写法
{{html|uppercase}}
<...

1.x写法

<body>
<div id="app">
  {{html|uppercase}}
</div>
<script>
  new vue({
    el:'#app',
    data:{
      msg:"123",
      html:"abc"
    }
  })
</script>
</body>

但是2.0中已经废弃了过滤器,需要我们自定义

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

//过滤器
vue.filter('uppercase', function(value) {
 if (!value) { return ''}
 value = value.tostring()
 return value.charat(0).touppercase() + value.slice(1)
})

var vm = new vue({
 el:'#app',
 data: {
  message: 'test'
 }
})

vue.filter( id, [definition] )

参数:

{string} id
{function} [definition]

用法:

注册或获取全局过滤器。

// 注册
vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myfilter = vue.filter('my-filter')

官方文档参考:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。