Vue.js過濾器
阿新 • • 發佈:2018-11-01
過濾器的作用
在不改變資料的情況下,輸出前端需要的格式資料
過濾器的定義方法
Vue.filter(‘方法名’,function(val){});
過濾器的呼叫方法
{{ msg|方法名}}
注意事項
- 定義過濾器,必須放在Vue例項化前面
- 在沒有衝突的前提下,過濾器可以串聯
舉例應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-resource.js"></script> </head> <body> <div id="box"> <p>{{ msg|one|two }}</p> </div> </body> </html> <script type="text/javascript"> Vue.filter('one',function(val){ return val+'油條' }); Vue.filter('two',function(val){ return val+'豆漿' }); var vm = new Vue({ el: '#box', data: { msg:'今天吃' } }); </script>
過濾器練習地址:https://blog.csdn.net/qq_39383675/article/category/8256374