vue过滤器

最新推荐文章于 2022-10-31 00:58:56 发布

Z_BK9

最新推荐文章于 2022-10-31 00:58:56 发布

阅读量161

点赞数

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/Z_BK9/article/details/126417231

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、简介

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：

双花括号插值{{}}
v-bind 表达式 (后者从 2.1.0+ 开始支持)。

Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，

自定义规则

过滤的规则是自定义的，通过给Vue示例添加选项filters来设置过滤器是 JavaScript 函数，因此可以接收参数。

展现形式

过滤器可以串联

2、全局过滤器

我们在一个页面创建多个vue实例，并调用第三方时间控件来处理时间:dayjs git

dayjs().format();                                     // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD');                         // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss');                // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56

<!-- 导入dayJs 库 -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="js/vue.js"></script>
<body>
    <div id="app1">
        <p>{{ time |dateFormat }}</p>       
    </div>
    <div id="app2">
        <p>{{time | dateFormat}}</p>
    </div>
    <script>
       // 全局的过滤器
        //过滤器名称用''引起来，并且必须有返回值
    Vue.filter('dateFormat', function (val) {  
      // 直接调用dayJs得到的是当前时间
      // dayjs().format()
        
      // dayJs(给定的时间)得到的是指定的时间
      return dayjs(val).format('YYYY-MM-DD')

    })   
        var vm1 = new Vue({
            el: "#app1",
            data: {
                time: new Date()
            },
        })
        var vm2 = new Vue({
            el: "#app2",
            data: {
                time: new Date()
            },

        })
    </script>   
</body>

</html>

3、自定义过滤器

在vue1中创建了自定义过滤器，可以在app1中使用，但到app2中是无法使用，因为过滤器的范围是当前实例中

过滤器串接<p>{{ time |dateFormat|dateFormat2 }}</p>会按照由左向右的顺序执行，当dateFormat2和dateFormat的顺序颠倒时也会产生不同的效果

<!-- 导入dayJs 库 -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="js/vue.js"></script>

<body>
    <div id="app1">
        <p>{{ time |dateFormat | dateFormat2 }}</p>
    </div>
    <div id="app2">
        <p>{{time | dateFormat}}</p>
    </div>
    <script>
        // 全局的过滤器
        Vue.filter('dateFormat', function (val) {
            // dayJs(给定的时间)得到的是指定的时间
            return dayjs(val).format('YYYY-MM-DD')

        })
        Vue.filter('upper', function (val) {
            return val.toUpperCase();
        })
        var vm1 = new Vue({
            el: "#app1",
            data: {
                time: new Date()
            },
            filters: {
                dateFormat2(val) {
                    return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
                }
            }

        })
        var vm2 = new Vue({
            el: "#app2",
            data: {
                time: new Date()
            },

        })
    </script>
</body>

</html>

Z_BK9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue过滤器

过滤的规则是自定义的，通过给Vue示例添加选项filters来设置过滤器是 JavaScript 函数，因此可以接收参数。在vue1中创建了自定义过滤器，可以在app1中使用，但到app2中是无法使用，因为过滤器的范围是当前实例中。会按照由左向右的顺序执行，当dateFormat2和dateFormat的顺序颠倒时也会产生不同的效果。Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。双花括号插值{{}}...
复制链接

扫一扫