當前位置：首頁 > 前端技术 > vue >内容正文

vue

014_Vue过滤器

發布時間：2025/5/22 vue 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 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过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。