一、概念
Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。
过滤器可以用在两个地方： 插值表达式和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符“ ‘ | ’ 指示
二、定义全局过滤器
这里使用文本替换对过滤器做一个基础的分析。
<body>
<div id="aaa">
<p>{{text | textData('风') }}</p>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
//定义全局过滤器
Vue.filter('textData', function(text,arr){ //第一个参数是要进行修改的字符，第二个参数是接收的传过来的新的参数
// return text.replace('云',arr) //只查询到第一个符合条件的字符，然后返回新的值。
return text.replace(/云/g , arr) //查询到所有符合条件的字符，返回传过来的新的参数
});
var guilt = new Vue({
el: '#aaa',
data:{
text:'我是一朵云，云儿飘在天空，洁白的云朵'
},
methods:{
}
})
</script>
三、定义私有过滤器，设置时间的格式化
<div id="getDate"> <p>{{ date | forDate('') }}</p> </div> var vm = new Vue({ el:'#getDate', data:{ date: new Date() }, methods:{},
filters:{ //定义私有过滤器，过滤器有两个条件，过滤器名称和处理函数
forDate:function(dateStr,pattern){ //传递一个默认值
//根据给定的时间字符串，接收到一个确定的 时间值
var date = new Date(dateStr)
//获取年月日
var yy = date.getFullYear()
//将其转为字符串再通过 .padStart() 函数进行填充 第一个参数是填充为几位，第二个参数是用什么来填充
var mm = (date.getMonth() + 1).toString().padStart(2,'0')
var dd = date.getDate().toString().padStart(2,'0')
//toLowerCase() 将传过来的参数转化为小写的字符串
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return yy + '-' + mm + '-' + dd
}else{
var hh = date.getHours().toString().padStart(2,'0')
var min = date.getMinutes().toString().padStart(2,'0')
var ss = date.getSeconds().toString().padStart(2,'0')
return yy + '-' + mm + '-' + dd + ' ' +hh + ':' + min + ':' + ss
}
}
}
})