vue中的过滤器的使用

vue中的过滤器的使用

vue中的过滤器分为两种【局部过滤器】【全局过滤器】

1.定义有参局部过滤器

<div id="app">
            <p>{{ msg | filter03 }}</p>
</div>

<script>
var vm = new Vue({
    el:"#app",
    // 定义一个 Vue 局部的过滤器，名字叫做 filter03
    filter:{
       fliter(msg){
           //函数体，看需求 例如给字符上加￥
           return '￥'+ msg       
       }     
    }
})


</script>

2.定义无参全局过滤器

<div id="app">
            <p>{{ msg | filter02}}</p>
        </div>

        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  filter02
            Vue.filter('filter02', function(msg) {
               
                /函数体，看需求 例如给字符上加￥
           return '￥'+ msg    
            })
        </script>

3.定义有参全局过滤器

<div id="app">
            <p>{{ msg | filter03('#参数arg#','#参数arg#')}}</p>
        </div>

        <script>
            // 定义一个 Vue 全局的过滤器，名字叫做  filter03
            Vue.filter('filter03', function(msg, arg, arg2) {
              
             /函数体，看需求 例如给字符上加￥           
             return '￥'+ msg    
            })
      </script>