Vue-过滤器

Vue-过滤器

<div id="app">
  {{message}}
  <h3>单个过滤器</h3>
  <!--原始属性名|过滤器-->
  <p>{{message | messageFilter}}</p>
  <h3>测试过滤器多个参数</h3>
  {{java|add(vue,python)}}
</div>

<script>
// 全局过滤器
Vue.filter('messageFilter',function(value){
        if(!value){
            return ''
        }
        return value.toString().toUpperCase().replace('TMD','***').replace('SB','***')
    })
    var vm = new Vue({
        el:'#app',
        data:   {
            message:'小伙子，TMD就是个SB',
            java:90,
            vue:80,
            python:80
        },
        methods:{
        },
        filters:{//定义局部 过滤器
            messageFilter(value){ //messageFilter 过滤器名称
                if(!value){
                    return ''
                }
                return value.toString().toUpperCase().replace('TMD','***').replace('SB','***')
            },
            add(num1,num2,num3){
                return num1+num2+num3
            }
        }
    });
</script>