Vue过滤器

最新推荐文章于 2024-09-26 20:44:05 发布

MikazukiMo

最新推荐文章于 2024-09-26 20:44:05 发布

阅读量254

点赞数

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/MikazukiMo/article/details/105770032

版权

学习专栏收录该内容

28 篇文章

订阅专栏

本文主要介绍Vue.js中的过滤器使用，包括基本语法和关键注意点，强调过滤器需要在Vue实例创建之前定义，以确保其在模板中能够正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本语法

<body>
    <div id="app">
        <input type="text" v-model="msg">
        //----过滤器使用----
        <div>{{msg | upper}}</div>
    </div>
</body>
<script>
//------------------全局过滤器注册----------------------
    Vue.filter("upper", function (value) {
        //返回处理后的值
        return value.charAt(0).toUpperCase() + value.slice(1);
    })
//----------vue实例----------
    var vm = new Vue({
        el: "#app",
        data: {
            msg: ""
        },
//----------局部过滤器注册----------
        filters:{
            lower:function(value){
                return  value.charAt(0).toLowerCase() + value.slice(1);
            }
        }
    });
</script>