vue过滤器的使用

过滤器的基本使用

Vue.js 允许使用自定义过滤器完成一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

• 使用v-bind形式 v-bind:id="rawId | formatId"

• 使用差值表达式：{{插值|过滤器名}}

过滤器在定义时：
Vue.filter('过滤器的名称',function(data){})

例如

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

<script type="text/javascript">
    //声明全局过滤器
    Vue.filter('msgFormat',function(msg){
        //使用正则表达式进行匹配
        return msg.replace(/下雨/g,'下雪')
    })
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'我这里下雨了☔️，你那里下雨了嘛🌧'
            }
        })
</script>

效果如下：

含有参数的过滤器

使用带有参数的过滤器时，过滤器中的第一个参数是规定死的，为前面管道符号传递过来的数据，例如：

<div id="app">
    <p>{{msg|msgFormat(text,123)}}</p>
</div>

<script type="text/javascript">
    Vue.filter('msgFormat',function(msg,text,num){
        return msg.replace(/下雨/g,text+num)
    })
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'我这里下雨了☔️，你那里下雨了嘛🌧',
            text:'修改数据'
            }
        })
</script>

效果如下：