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  阅读(373)  评论(0)    收藏  举报