Vue(三)——过滤器_综合

一、注册过滤器

vue提供过滤器，但是没有内置过滤器。angular有内置很多过滤器。自定义函数也能做到和过滤器同样的功能。

过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数

假设有一个用于把内容转为大写的过滤器函数 toUpperCase

{
   {content|toUpperCase}}

| : 管道符，表示数据从左至右通过管道符进行传递
过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果

1.1全局过滤器

Vue.filter('过滤器名称', 过滤器函数);

1.2局部过滤器

Vue.component('组件', {...,filters: {'过滤器名称': 过滤器函数	}
})

二、实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>过滤器</title>
</head><body><div id="app"><!-- 局部过滤器只能在局部定义 -->{
   {title|toUpperCase|substr(1,5)|slice(2)}}</div><script src="./js/vue.js"></script><script>// 全局过滤器Vue.filter('toUpperCase',val=>{// 注意需要returnreturn val.toUpperCase();});// 如果过滤器传入了参数substr(1,5)，则接收时，第一个值默认原字符串val ,其他参数依次排列Vue.filter('substr',(val,start,end)=>{// 注意需要returnreturn val.substring(start,end);});let app = new Vue({el: "#app",data: {title:'hello word!!!'},// 局部过滤器filters: {slice(val, n) {return val.slice(n);}}});</script>
</body></html>