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

Posted 2022-03-01 xzjeff

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()

)