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

})

 

标签：Vue,VUE2,用法,msg,实例,toUpper,过滤器,表达式
来源： https://www.cnblogs.com/Jeff362143/p/15948792.html