1、局部filter
<!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> </head> <body> <div id="app"> <p>{{msg}}</p> <App /> </div> <script src="./js/vue.js"></script> <script> let App = { data(){ return { text: "Hello World" } }, template:` <div> <p>{{text | reverfilter}}<p> </div> `, filters:{ reverfilter: function(str){ str = str.split(‘‘).reverse().join(‘‘); return str } }, } new Vue({ el: "#app", data(){ return { msg: "filter" } }, components:{ App } }) </script> </body> </html>
全局筛选器
<!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> </head> <body> <div id="app"> <p>{{msg}}</p> <App /> </div> <script src="./js/vue.js"></script> <script> // 全局筛选器 Vue.filter("myFilter", function(val){ return val.split(‘‘).reverse().join(‘‘); }) let App = { data(){ return { text: "Hello World" } }, template:` <div> <p>{{text | myFilter}}<p> </div> `, } new Vue({ el: "#app", data(){ return { msg: "filter" } }, components:{ App } }) </script> </body> </html>
原文：https://www.cnblogs.com/wt7018/p/11505600.html