过滤器使用场景
当数据需要再次加工和处理的时候。
Vue.js 允许自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部双花括号插值(使用全局定义)
HTML:
{ { message | capitalize }}
JS:
Vue.filter('capitalize', (value) => { if (!value) return '' // 对数据处理后 返回 value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})
过滤器函数总接收表达式的值 作为第一个参数。在上述例子中,capitalize 过滤器函数将会收到 message 的值作为第一个参数。
v-bind表达式(在组件内定义)
HTML:
JS:
let vm = new Vue({ // .. filters: { getHref (value) => { return 'https://cnodejs.org/topic/' + value } }})
类似的,getHref 过滤器函数将会收到 uri.id 的值作为第一个参数。
过滤器的更多内容: