vue过滤器

183 阅读1分钟

概念

过滤器说白了就是格式化文本输出,不会改变原来的值;

全局过滤器

main.js中定义
    //全局过滤器
    Vue.filter("changeBig",function(str){
      //首字母大写
      str=str.charAt(0).toUpperCase()+str.substring(1)
      return str
    })
    // 日期加‘-’
    import moment from 'moment'
	Vue.filter('format',function(val,arg){
        if(!val) return;
        val = val.toString()
        return moment(val).format(arg)
    })
    <div>{{time | format('YYYY-MM-DD')}}</div>

局部过滤器

filters:{
    //把字符串倒过来
    reverse(str){
      var arr=str.split("").reverse()
      return arr.join()
    }
}
filters: {
        //保留两位小数
        numFilter (value) {
            return realVal=parseFloat(value).toFixed(2)
        }
}


<body>
    <div id="app">
        {{date | formaDate}}
    </div>
</body>
</html>
<script>
    var padaDate = function(value){
        return value<10?'0'+value:value;
    }
    new Vue({
        el:"#app",
        data:{
            date:new Date()
        },
        filters: {
            //时间转换
            formaDate(valve){
                var date = new Date();
                var year = date.getFullYear();
                var month = padaDate(date.getMonth()+1);
                var day = padaDate(date.getDate());
                var hours = padaDate(date.getHours());
                var minutes = padaDate(date.getMinutes());
                var seconds = padaDate(date.getSeconds());

                return '现在时间是:'+year+'年'+month+'月'+day+'日'+hours+'时'+minutes+'分'+seconds+'秒';
            }
        },
    })
</script>

3. vue中将时间去掉'-'的方法

//日期时间去横杠
export function FromDatesCancle(StringDate) {
    let CanTime = [];
    for (let i = 0; i < StringDate.length; i++) {
        if (StringDate[i] !== "-") {
            CanTime.push(StringDate[i]);
        }
    }
    return CanTime.join('');
}

3.1 vue中将时间加'-'的方法

export function FromDates(StringDate) {
    let T = "",
        N = "",
        Y = "",
        R = "";
    for (let i = 0; i < StringDate.length; i++) {
        N = StringDate.substring(0, 4) + "-";
        Y = StringDate.substring(4, 6) + "-";
        R = StringDate.substring(6, 8);
        T = N + Y + R;
        return T;
    }
}