vue 过滤器的使用
在组件内部用 filters:{
1.声明过滤器
过滤器的名字:function(value){
//内部一定要return
}
2.调用过滤器 : 数据属性 | 过滤器的名字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script type="text/javascript"> /*在组件内部用 filters:{ 1.声明过滤器 过滤器的名字:function(value){ //内部一定要return } 2.调用过滤器 : 数据属性 | 过滤器的名字 } */ var App = { data(){ return{ price: 0, msg:'hello filter' } }, template:` <div> <input type="number" name = 'price' v-model = 'price'/> <h3>{{price | myCurrentcy}}</h3> </div> `, filters:{ myCurrentcy:function(value) { return '¥' + value; } } } new Vue({ el:'#app', components:{ App }, template:'<App />' }); </script> </body> </html>
效果:
越努力越幸运