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)
    });

总结:

相关推荐
weixin-a1530030831626 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v8 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls8 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友8 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全