vue.js_05_vue.js的过滤器

1.过滤器的定义和使用

实现：将页面的中的单纯替换成，用户传来的文字。

全局过滤器：所有的Vue对象都可以使用

<body>

        <div id="app">

　　　　　　　　//可以使用多个过滤器  第一个过滤器将返回的结果作为参数传递给第二个过滤器

            <p>{{msg| msgFilter('疯狂')| test}}</p>

        </div>

        <script>

            //定义一个msgFilter过滤器

            Vue.filter('msgFilter',function(msg,arg){

                return msg.replace(/单纯/g,arg)

            });

            Vue.filter('test',function(msg){

                return msg+'============'

            });

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '曾经，我是一个单纯的人，如今我已不再单纯',

                },

                methods: {}

            })

        </script>

    </body>

2.私用的过滤器

只用创建的Vue对象才可以使用

如果私有和公用的过滤器名字相同则依据就近原则使用

实现：通过一个私有的过滤器，实现时间的格式化

<td>{{item.ctime | dateFormat}}</td>

methods: {

                filters: {

                    //如果私有的过滤器和全局过滤器的名称一致 那么默认去找私有的过滤器

                    dateFormat: function(datestr) {

                        //格式化时间yyyy-MM-dd

                        var date = new Date()

                        var y = date.getFullYear()

                        //格式化数字 不足两位补充'0'

                        var m = (date.getMonth() + 1).toString().padStart(2, '0')

                        var d = date.getDate().toString().padStart(2, '0')

                        return `${y}-${m}-${d}`

                    }

                },

巴特西

vue.js_05_vue.js的过滤器

1.过滤器的定义和使用

2.私用的过滤器

最新文章

热门文章