VUE2.x之過濾器的基本用法
阿新 • • 發佈:2022-03-01
Vue.js 允許你自定義過濾器,可被用於一些常見的文字格式化。過濾器可以用在兩個地方:雙花括號插值和v-bind
表示式。過濾器應該被新增在 JavaScript 表示式的尾部,由“ | ”符號指示:
/**
過濾器函式總接收表示式的值 (之前的操作鏈的結果) 作為第一個引數。下面例子中過濾器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()})