1、过滤器

1.1 概念

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据

1.2 代码实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>标题</title>

    <!-- 引入vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

    <script type="text/javascript" src="../js/dayjs.min.js"></script>

</head>

<body>

    <div id="App">

        <h1>格式化后的时间</h1>

        <h2>现在是（计算属性实现）:{{formatTime}}</h2><br />

        <h2>现在是（method实现）:{{getformatTime()}}</h2><br />

        <h2>现在是（过滤器实现）:{{time | timeFormater}}</h2><br />

        <h2>现在是（过滤器实现同时传参）:{{time | timeFormater('YYYY-MM-DD')}}</h2><br />

        <h2>现在是（过滤器实现同时传参（多个过滤器的联合使用））:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2><br />

    </div>

    <script type="text/javascript">

        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //全局过滤器

        Vue.filter('mySlice', function (value) {

            return value.slice(0, 4)

        })

        //创建Vue实例

        new Vue({

            el: '#App',

            data: {

                value: "Vue",

                time: 1658153149000, //时间戳

            },

            methods: {

                getformatTime() {

                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                }

            },

            computed: {

                formatTime() {

                    return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')

                }

            },

            filters: {

                timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {

                    return dayjs(value).format(str)

                }

            }

        })

    </script>

</body>

</html>

巴特西

Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）

1、过滤器

1.1 概念

1.2 代码实例

1.3 测试效果

最新文章

热门文章