VUE2.x之过滤器的基本用法

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“ | ”符号指示:

过滤器存在全局定义和局部定义两种方式：

1、局部定义是在Vue实例的filter属性中定义函数，它也只能在该Vue实例中使用

/**

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。下面例子中过滤器toUpper函数将会收到 msg 表达式的值
作为第一个参数。
*/

<div id="app">
    <h2>{{msg | toUpper}}</h2>
</div>

let data = {
    msg: 'message'
}
let app = new Vue({
    el: '#app',
    data,
    filters: {
         toUpper: function(msg) {
             return msg.toUpperCase()
         }
     }
})

 　　

 2、全局定义是在创建Vue实例之前调用Vue.filter方法，可以被全部Vue实例使用

  <div id="app">

　　 <h2>{{msg | toUpper}}</h2>

  </div>

  Vue.filter('toUpper', function(msg) {

    return msg.toUpperCase()

})