zoukankan      html  css  js  c++  java
  • Vue -过滤器

    Vue允许自定义过滤器,用作一些常见的文本格式化过滤器只用在两个地方:mustache插值v-bind表达式

    全局过滤器

    Vue.filter ( ' 过滤器名字 ' ,回调函数 )

    <body>
    <div id="app">
       原msg字符串:{{ msg }} <br>
       过滤后的msg:{{ msg | msgFormat }} <!--通过管道符 | 来使用过滤器,若要传参,msgFormat(arg),参数可传多个-->
    </div>
    <script>
         //定义一个Vue的全局过滤器,名字叫做msgFormat
         //回调函数的第一个参数是管道符前面传递的数据,若上面有参数传来,接收即可,function(data,arg)
         Vue.filter('msgFormat',function (data) {
             return data.replace(/*/g,'')
         })
    
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'*H*e*l*l*o*'
            }
        })
    </script>
    </body>

     

    全局过滤器可被所有的vm实例使用

    可对同一数据同时使用多个过滤器,依样画葫芦

     

    私有过滤器

    在创建vm对象时使用filters属性可为这个实例对象建立私有过滤器

    <body>
    <div id="app">
       {{ msg | msgFormat }} 
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'*H*e*l*l*o*'
            },
            filters:{
                //定义私有过滤器,过滤器名称:处理函数
                msgFormat:function (data) {
                    return data.replace(/*/g,'') 
                }
            }
        })
    </script>
    </body>

    过滤器采用就近原则,如果私有过滤器和全局过滤器重名则优先使用自身的私有过滤器

  • 相关阅读:
    React 进修之路(1)
    requireJS的配置心得
    DOM的内部插入和外部插入
    h5移动端设备像素比dpr介绍
    原生js--事件类型
    React 进修之路(3)
    javaScript
    html&css
    MyBatis
    Maven基础
  • 原文地址:https://www.cnblogs.com/Grani/p/9626453.html
Copyright © 2011-2022 走看看