【VUE学习】day03-过滤器filter

VUE学习第三天

过滤器filter
- 全局过滤器
- 私有过滤器

过滤器filter

作用：常见的文本格式化
使用场景：插值表达式、v-bind
用法：{{msg | filterName}} ; v-bind:属性=‘msg | filterName’

msg:需要格式化的文本信息（管道符前面的数据）
‘|’:管道符
filterName:过滤器名称

全局过滤器

写在main.js文件中，全部vue文件都可以使用全局过滤器
Vue.filter( id,call( ) )

id:过滤器名称
call():回调函数。两个参数：data：需要过滤的文本信息、format：使用过滤器时传入的参数。
回调函数中的返回值return 会被渲染到页面上

在main.js文件中定义一个全局过滤器filterText，将需要过滤的文本信息中的”过滤器“替换为”filter“

Vue.filter('filterText',function(data,format){console.log(format)return data.replace('过滤器','filter')
})

.vue文件中使用过滤器

<script>
export default {name: "filterPage",data() {return {msg: '全局过滤器',//过滤之后结果为“全局filter”}}
}
</script><template><div><div>{{ msg|filterText }}</div></div>
</template>

私有过滤器

写在**.vue文件的script标签**中，与data和methods平级，只有在当前vue文件中才能使用
filters{ id(data,format){ } }
在.vue文件中定义两个私有过滤器filter1，filter2，将msg1中的’private’替换成“私有”（作为format参数传入），再将filter1过滤之后的内容再次进行过滤’filter’替换成“过滤器”

<script>
export default {name: "filterPage",data() {return {msg1: '私有filter是私有的'}},filters: {filter1(data, format) {console.log(format)return data.replace('private', format)},filter2(data, format) {console.log(format)return data.replace('filter', format)}}
}
</script><template><div><div>{{ msg1|filter1('私有') }}</div>//“私有filter是私有的”<div>{{ msg1|filter1('私有')|filter2('过滤器') }}</div>//“私有过滤器是私有的”</div></template>