当前位置：首页 > 前端技术 > vue >内容正文

vue

014_Vue过滤器

发布时间：2025/5/22 vue 67 豆豆

生活随笔收集整理的这篇文章主要介绍了 014_Vue过滤器小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 过滤器的作用是什么?

1.1. 格式化数据, 比如: 将字符串格式化为首字母大写、将日期格式化为指定的格式等等。

1.2. 自定义全局过滤器

Vue.filter("过滤器名称", function(val) {// 过滤器业务逻辑 });

1.3. 自定义局部过滤器

filters: {format: function(date, format){} }

1.4. 过滤器的使用

<div>首字母大写: {{msg | upper}}</div> <div>首字母小写: {{msg | lower}}</div><hr /><div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div>

2. 过滤器例子

2.1. 代码

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>过滤器</title></head><body><div id="app"><input type="text" v-model="msg" /><div>原值: {{msg}}</div><div>首字母大写: {{msg | upper}}</div><div>首字母小写: {{msg | lower}}</div><hr /><div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 自定义全局过滤器Vue.filter("upper", function(val) {return val.charAt(0).toUpperCase() + val.slice(1);});Vue.filter("lower", function(val) {return val.charAt(0).toLowerCase() + val.slice(1);});var vm = new Vue({el: "#app",data: {msg: "",date: new Date()},// 自定义局部过滤器filters: {format: function(date, format){date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, // 月份 "d": date.getDate(), // 日 "h": date.getHours(), // 小时 "m": date.getMinutes(), // 分 "s": date.getSeconds(), // 秒 "q": Math.floor((date.getMonth() + 3) / 3), // 季度 "S": date.getMilliseconds() // 毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = "0" + v;v = v.substr(v.length - 2);}return v;} else if (t === "y") {return (date.getFullYear() + "").substr(4 - all.length);}return all;});return format;}}});</script></body> </html>

2.2. 效果图

总结

以上是生活随笔为你收集整理的014_Vue过滤器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。