过滤器（格式化）

最新推荐文章于 2022-06-28 15:33:58 发布

予倾

最新推荐文章于 2022-06-28 15:33:58 发布

阅读量459

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/QZ9420/article/details/110637028

版权

vue 专栏收录该内容

56 篇文章 4 订阅

订阅专栏

一、filters过滤器函数可以使用在两个地方:

1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}

2.v-bind:str= “文本字符串 | 过滤函数”

以下实例为四舍五入，以及过滤器串联后11.11

<!--
    过滤器：
        对data的数据进行过滤器，是对data中的数据进行格式化的。

        过滤器本质也是一个函数。使用的时候，需要配合 |
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <h2>格式化money</h2>
        <p>wangcai很有钱：￥{{ money }}</p>
        <p>wangcai很有钱： {{ money | moneyFormat }}</p>

        <h2>格式化日期</h2>
        <p>今天的日期是：{{ time }}</p>
        <p>今天的日期是：{{ time | timeFormat }}</p>
        <p>今天的日期是：{{ time | timeFormat("YYYY-MM-DD") }}</p>
        <p>今天的日期是：{{ time | timeFormat("HH:mm:ss") }}</p>
    </div>
    </div>
    <script src="../js/vue-development.js"></script>
    <script src="../js/moment.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    money:234567,
                    time:new Date()
                }
            },
            filters:{
                moneyFormat(value){
                    return "￥"+Number(value).toFixed(2)
                },
                timeFormat(value, format="YYYY-MM-DD HH:mm:ss"){
                    // moment 是一个第三方模块，它是专门用来对日期进行格式化的
                    return moment(value).format(format)
                }
            },
            methods:{
            }
        });
    </script>
</body>
</html>