Vue过滤器
局部过滤器#
<body>
<div id="app">
{{message | upperFilter}}<br>
{{nowTime | dateFormat}}<br>
{{nowTime | dateFormat('YYYY-MM-DD')}}
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<script>
const vm = new Vue({
data:{
message:"abc",
nowTime:(new Date().getTime())
},
filters:{
upperFilter(val){
return val.toUpperCase();
},
dateFormat(value,str = "YYYY-MM-DD hh:mm:ss"){ //str参数默认值为YYYY-MM-DD hh:mm:ss如果传入其他参数则代替
return dayjs(value).format(str);
}
}
})
vm.$mount("#app");
</script>
</html>
全局过滤器#
<body>
<div id="app">
{{message | upperFilter}}<br>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
<script>
Vue.filter("upperFilter",function(val){
return val.toUpperCase();
})
const vm = new Vue({
data:{
message:"abc",
nowTime:(new Date().getTime())
}
})
vm.$mount("#app");
</script>
Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理