vue之过滤器的用法

一、概念

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

}

})