Vue-23、Vue过滤器

1、效果

2、过滤器实现

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="root">
    <h1>显示格式化后的时间</h1>
    <!---->
    <h2>现在是:{{time| timeFormater}}</h2>


</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            time:1705392226413,
        },
        filters:{
            timeFormater(value){
                console.log(value);
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            }
        }

    })
</script>
</body>
</html>

3、过滤器传参

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="root">
    <h1>显示格式化后的时间</h1>
    <!--过滤器实现-->
    <h2>现在是:{{time| timeFormater}}</h2>
    <!--过滤器实现传参-->
    <h2>现在是:{{time| timeFormater2('YYYY-MM-DD')}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            time:1705392226413,
        },
        filters:{
            timeFormater(value){
                console.log(value);
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            },

            timeFormater2(value,str){
                return dayjs(value).format(str)
            }
            
            
        }

    })
</script>
</body>
</html>

3、多个过滤器

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>

    </style>
</head>
<body>
<div id="root">
    <h1>显示格式化后的时间</h1>
    <!--过滤器实现-->
    <h2>现在是:{{time| timeFormater}}</h2>
    <!--过滤器实现传参-->
    <h2>现在是:{{time| timeFormater2('YYYY-MM-DD')}}</h2>

    <!--多个过滤器-->
    <h2>现在是:{{time| timeFormater | timeFormater3}}</h2>

</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            time:1705392226413,
        },
        filters:{
            timeFormater(value){
                console.log(value);
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            },

            timeFormater2(value,str){
                return dayjs(value).format(str)
            },

            timeFormater3(value){
                return value.slice(0,4)
            }
        }

    })
</script>
</body>
</html>

4、全局过滤器

javascript 复制代码
Vue.filter('myFileter',function (value) {
        return value.slice(0,4)
    });

总结:

相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem5 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理5 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall6 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴6 小时前
简单入门Python装饰器
前端·python