vue过滤器

最新推荐文章于 2024-08-25 09:57:22 发布

SuperLuxy

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量62

点赞数

分类专栏：个人笔记文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_45158336/article/details/120768011

版权

个人笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引⼊⽇期处理库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- 过滤器的使⽤ -->
        <h2>{{time | fmTime}}</h2>
        <h3>{{msg | myslice}}</h3>
    </div>
</body>
<script>
    //全局注册过滤器‘
    Vue.filter('myslice', function (value) {
        return value.slice(0, 4)
    })
    new Vue({
        el: '#root',
        data: {
            time: Date.now(),
            msg: 'hello briup'
        },
        //过滤器配置项
        //局部注册过滤器
        filters: {
            fmTime(value) {
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            }
        }
    });
</script>

</html>

过滤器：定义：对要显示的数据进⾏特定格式化后再显示（适应于⼀些简单逻辑的处理）

语法：

1.注册过滤器：Vue.filter(name,callback)

2.使⽤过滤器：{{ xxx | 过滤器名称}} 或者 v-bind:属性 = "xxx | 过滤器名"

注意： 1.过滤器可以接受额外参数，多个过滤器也可以串联

2.并没有改变原本的数据，是产⽣新的对应数据

SuperLuxy

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过.
复制链接

扫一扫