Vue的过滤器

过滤器 filter

• 作用：文本数据格式化
• 两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

• 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用

Vue.filter('filterName', function(value) {
  // value 表示要过滤的内容
})

• 示例：

<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容
    // format 过滤器的参数
  })
</script>

局部过滤器

• 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

{
  data: {},
  // 通过 filters 属性创建局部过滤器
  filters: {
    filterName: function(value) {}
  }
}

• 本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写：

    <div id="app">
        <h1>{{ name | Upper}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data () {
                return {
                    name : 'vue'
                }
            },
            //声明一个本地的过滤器
            filters: {
                Upper: function(value) {
                        return value.toUpperCase()
                    }
                
            }
        })
    </script>

这是在页面中显示的效果.png