vue 过滤器的使用实例

<html>
    <head>
        <title></title>
filters: {
            capitalize(value) {
                switch (value) {
                    //00:新建,01:成功,02:部分成功,03:撤销,04:超时未处理,05:失败,06:保全中
                    case '00':
                        return "新建";
                    case '01':
                        return "成功";
                    case '02':
                        return "部分成功";
                    case '03':
                        return "撤销";
                    case '04':
                        return "超时未处理";
                    case '05':
                        return "失败";
                    case '06':
                        return "保全中";
                    default:
                        return "无"
                }
            }
        },

页面中可以这样写

<td>{{user.status|capitalize}}</td>

  

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> window.onload=function(){ Vue.filter( "addZero",function(num){ return num<10?'0'+num : num; } ) new Vue({ el: "#app", data: { curTime: '1566091212' }, filters:{ number: function(num,n){ return num.toFixed(n); }, //格式化时间戳 date(data){ let d= new Date(data * 1000); return d.getFullYear() + '-' + d.getMonth() + 1 + '-' + d.getSeconds(); } } }) } </script> </head> <body> <div id="app"> <div> {{110 |addZero}} <br> {{3.42536544|number(8)}} <br> {{curTime |date}} </div> </div> </body> </html>

  

posted @ 2019-08-18 09:33  oc-long  阅读(359)  评论(0编辑  收藏  举报