VUE中全局过滤器，局部过滤器

最新推荐文章于 2024-09-05 13:30:00 发布

_WaCz?

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量374

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/wangcz0630/article/details/106268124

版权

VUE中全局过滤器，局部过滤器

局部过滤器
1.添加filters钩子
2.在具体数据 | 名字

,
        filters: {
            //局部过滤器
            moneyFilter(value) {
                return '￥' + Number(value).toFixed(2);
            }
        }

全局过滤器
在main.js中定义

Vue.filter('wholeMoneyFormat',(value)=>{
  return '￥' + Number(value).toFixed(4);
});

例子：

<template>
    <div>
        <h3>格式化人民币</h3>
        <p>{{money | moneyFilter}}</p>
        <p>{{page | wholeMoneyFormat}}</p>
        <p></p>
        <h3>格式化日期</h3>
        <p>{{time}}</p>
        <p>{{time | timeFormat}}</p>
        <p>{{time | timeFormat('HH:mm:ss')}}</p>
    </div>
</template>0

<script>
    import moment from "moment"
    export default {
        name: "LkFilters",
        data() {
            return {
                money: 22334,
                page: 123.123,
                time:new Date()
            }
        },
        mounted() {
            setInterval(()=>{
                this.time = new Date()
            },1000)
        },
        filters: {
            //局部过滤器
            moneyFilter(value) {
                return '￥' + Number(value).toFixed(2);
            },
            timeFormat(value , format='YYYY-MM-DD HH:MM:SS'){
                return moment(value).format(format);
            }

        }
    }
</script>

<style scoped>

</style>