當前位置：
首頁 >
过滤器的基本使用
發布時間：2025/4/16
26
豆豆
過濾器
概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符指示；
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p></div><script>// 定義一個 Vue 全局的過濾器，名字叫做 msgFormatVue.filter('msgFormat', function (msg, arg, arg2) {// 字符串的 replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則<!--return msg.replace('單純', '邪惡')--><!--return msg.replace(/單純/g, '邪惡')-->return msg.replace(/單純/g, arg + arg2)})Vue.filter('test', function (msg) {return msg + '========'})// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'},methods: {}});</script> </body></html>
總結
- 上一篇： 品牌管理案例——添加新品牌 删除品牌
- 下一篇： 全局的过滤器， 进行时间的格式化——所谓