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

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/**过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。下面例子中过滤器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()

})