vue2 过滤器

最新推荐文章于 2023-01-10 17:46:31 发布

深浅Java

最新推荐文章于 2023-01-10 17:46:31 发布

阅读量205

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_46813809/article/details/120603734

版权

过滤器

只有vue2过滤器才会用过滤器，vue3已经淘汰，vue过滤器可以用在双括号插值和v-bind表达式中，过滤器分为两种，一种私有，另一种全局公有过滤器。

私有过滤器

私有过滤器时放在el挂在的vue实例中，例如将message变量的值转为大写。

<body>
    <div id="app">
        <p>{{message | cap}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },
            filters: {
                cap(val) {
                    return val.toUpperCase()
                }
            }

        })
    </script>
</body>

全局过滤器

全局过滤器是定义在vue实例之前，例如将message变量的值转变为大写

<body>
    <div id="app">
        <p>{{message | cap}}</p>
    </div>
    <script>
        Vue.filter('cap', (val) => {
            return val.toUpperCase()
        })
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },

        })
    </script>
</body>

注意： 当全局过滤器与私有过滤器重名时，会调用私有过滤器。

过滤器还可以串联，前一个过滤器的值会传入到后一个过滤器中,例如将message的值转入cap中返回大写，再将cap返回的大写字符串转入cap2中转为小写，最后返回到插值中。

<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message | cap |cap2 }} </p>
    </div>
    <script>
        Vue.filter('cap', (val) => {
            return val.toUpperCase()
        })
        Vue.filter('cap2', (val) => {
            return val.toLowerCase()
        })
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },

        })
    </script>
</body>

过滤器还可以传递参数，默认的message默认传入其中，不需要写入，但在过滤器函数中，第一个参数必须是message。

<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message | cap('!') }} </p>
    </div>
    <script>
        Vue.filter('cap', (val, age) => {
            return val.toUpperCase() + age
        })
        new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            },

        })
    </script>
</body>

深浅Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2 过滤器

过滤器只有vue2过滤器才会用过滤器，vue3已经淘汰，vue过滤器可以用在双括号插值和v-bind表达式中，过滤器分为两种，一种私有，另一种全局公有过滤器。私有过滤器私有过滤器时放在el挂在的vue实例中，例如将message变量的值转为大写。<body> <div id="app"> <p>{{message | cap}}</p> </div> <script> ne
复制链接

扫一扫