1. 程式人生 > 其它 >VUE2.x之過濾器的基本用法

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