VUE过滤器的使用

2024年4月16日 81次阅读 来源: 大表哥

vue过滤器可以在两个场景使用：

1.双花括号内
2.v-bind内

vue过滤器分为本地过滤器和全局过滤器。

本地过滤器使用例子：

<div id="app">
    <h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        },
        filters:{
            CaseWrite:function (val) {
                return val.toUpperCase()
            }
        }
    })
</script>

如上所示，双花括号中使用本地过滤器的一个大写转小写的使用例子。

全局过滤器使用例子：

<div id="app">
    <h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    Vue.filter('CaseWrite',function (val) {
        return val.toUpperCase();
    })

    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        }
    })
</script>

如上所示，双花括号中使用全局过滤器的一个大写转小写的使用例子。

注意：全局过滤器需定义在vue实例创建之前。

vue过滤器还可以嵌套使用
以下是一个过滤器A处理msg之后，再传递给过滤器B处理的使用例子

<div id="app">
    <h1>{{ msg|CaseWrite|reversal }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
    Vue.filter('CaseWrite',function (val) {
        return val.toUpperCase()
    })
    Vue.filter('reversal',function (val) {
        return val.split('').reverse().join('');
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        }
    })
</script>
    原文作者：大表哥
    原文地址: https://segmentfault.com/a/1190000018371620
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞