Vue---自定义过滤器

最新推荐文章于 2023-03-09 14:16:36 发布

郭浩326

最新推荐文章于 2023-03-09 14:16:36 发布

阅读量266

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72785211

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置指令</title>
    <script src="js/vue.js" ></script>
</head>
<body>

<div id="app">

    {{msg | uppercase}}<br>

    {{box | lowercase}}<br>
    ============================
    {{box | limitBy(5) }}<br>
    ============================
    ============================
    {{msg | capitalize }}<br>
    ============================
</div>

<!--<div id="app2">-->
<!--{{box | capitalize}}<br>-->
<!--</div>-->



<script>

    /**
     * 全局过滤器的定义方式，注意：
     * 全局过滤器定义的时候，一定要定义在实在的实例之前
     */
    Vue.filter("lowercase",function (data) {
        if (!data) {
            return "";
        }
        return data.toLowerCase();
    });

    var app = new Vue({
        el : "#app",
        data : {
            msg : "woyaonupengyou",
            box : "WOYAONVPENGYOU"
        },
        "filters" : {
            uppercase : function (data) {
                if (!data) {
                    return "";
                }
                return data.toUpperCase();
            },
            "limitBy" : function (data,index) {
                if (!data) {
                    return "";
                }
                //slice和splice的区别 splice删除数据
                return data.slice(0,index);
            },
            "capitalize" : function (data) {
                if (!data) {
                    return "";
                }
                return data.substr(0,1).toUpperCase()+data.substr(1);
            }
        }
    });
    

</script>
</body>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---自定义过滤器

html>html lang="en">head> meta charset="UTF-8"> title>内置指令title> script src="js/vue.js" >script>head>body>div id="app"> {{msg | uppercase}}br> {{box | lowercase}}br> ==
复制链接

扫一扫

专栏目录