vue全局过滤器概念及注意事项和基本使用方法

Vue.filter('过滤器将来被调用时候的名称',过滤器的处理函数)

 <!-- 在调用过滤器是时候，需要使用 | 来调用， | 叫做管道符 -->
      <td>{{item.ctime | formatDate}}</td>

//    这里的 data 就是管道符前面的 item.ctime 的值
Vue.filter('formatDate',function(data){

})
// 过滤器中必须有一个返回值

  <div id="app">
        <h3>{{mes}}</h3>
    </div>

<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一个悲观的人，悲观的人做悲观的事"
            }
        })
    </script>

 Vue.filter('setStr',function(data){
        })

 Vue.filter('setStr',function(data){
            // 过滤器中必须有一个返回值
            return data.replace(/悲观/g,'开朗')
            // 使用字符串操作方法 replace 替换字符串内某些元素为其他元素，g 代表全局匹配
        })

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

Vue.filter("strFormat",function(data,str){ // 可以在data后面给个形参
            // 在过滤器中，必须要有返回值
            return data.replace(/悲观/g,str)
            // 使用字符串操作方法 replace 替换字符串内某些元素为其他元素，g 代表全局匹配
        })

<div id="app">
        <h3>{{mes | setStr("粗心")}}</h3>
    </div>

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.filter('setStr',function(data,str="细心"){
            // 过滤器中必须有一个返回值
            return data.replace(/悲观/g,str)
            // 使用字符串操作方法 replace 替换字符串内某些元素为其他元素，g 代表全局匹配
        })