简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如,从['abc','abd','ade']数组中取得包含‘ab’的值,那么可通过过滤器筛选出来‘abc’和‘abd’;把‘Hello’变成‘Hello World’,那么可用过滤器给值‘Hello’后面添加上‘ World’;或者把时间节点改为时间戳等等都可以使用过滤器。
全局过滤器:
Vue.filter('globalFilter', function (value) {
return value + "!!!"
})
<body> <div class="box"> <!-- | 代表管道,过滤器语法 后面msopt是过滤器的名字 --> <p>{{ ms | msopt('疯狂')}}</p> </div> <script> // 标准函数 // var a=function (args){ // alert("hello word"); // }; // 箭头函数 // var a=()=>{ // alert("hello word"); // }; // 全局过滤 filter 第一个参数是必须的,第一个参数就是{{ms |msopt}}"|"前面的 // 定义一个全局的过滤器 filter名字叫做msopt //这里面回调函数 function(){return dd.replace()} 简写成了箭头函数 // 而且 <p>{{ ms | msopt('疯狂'')}}</p> 我们需要自己来出传递这个参数 // 我们知道filter 里面的回调函数 第一个参数是写死的,我们只能用第二个 Vue.filter('msopt', (dd,arg)=>{ return dd.replace('/单纯/g',arg); // /单纯/g 正则表达式 g 是全局搜索 }) var vm=new Vue({ el:'.box', data:{ ms:'单纯的我,就喜欢单纯的问问,你单纯吗?' }, methods: { }, }) </script>
私有过滤器(filters)
<tbody> <tr> <td>{{ jj | appmeg("不上班") }}</td> </tr> </tbody> </table> <script> var vm=new Vue({ el:'.table', data:{ jj:'今天星期六' }, methods:{ }, //定义自定义(私有)的过滤器 // filters:{ // // appmeg 私有过滤器的名字 a 是必须参数 代表要过滤的字符串 // 如果存在私有和全局过滤器,采用就近原则先用私有的过滤器 // appmeg:function(a){ // return a+'sdfsdfsdf'; // } // } // 带有参数的自定义filter filters:{ // appmeg 私有过滤器的名字 a 是必须参数 代表要过滤的字符串 appmeg:function(a,b){ return a+'sdfsdfsdf'+b; } } }); </script>