VUE过滤器

最新推荐文章于 2024-02-20 00:00:00 发布

技术林

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量110

点赞数

分类专栏：笔记总结 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45810135/article/details/108917757

版权

笔记同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

总结

27 篇文章 1 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

文章目录

- 过滤器

过滤器

过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数

假设有一个用于把内容转为大写的过滤器函数 toUpperCase

{{content|toUpperCase}}

| : 管道符，表示数据从左至右通过管道符进行传递
过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果

注册过滤器

全局过滤器

Vue.filter('过滤器名称', 过滤器函数);

局部过滤器

Vue.component('组件', {
  ...,
  filters: {
  	'过滤器名称': 过滤器函数	
	}
})

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{title|toUpperCase|slice(3)}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 'kaikeba'
            },
            filters: {
                toUpperCase: function(val) {
                    return val.toUpperCase();
                },
                slice(val, n) {
                    return val.slice(n);
                }
            }
        })
    </script>
</body>
</html>

技术林

关注

0
点赞
踩
0

收藏

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

文章目录过滤器注册过滤器全局过滤器局部过滤器实例过滤器过滤器是一个使用在双大括号插值和 v-bind 中，用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}| : 管道符，表示数据从左至右通过管道符进行传递过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果注册过滤器全局过滤器Vue.filter('过滤器名称', 过滤器函数);局部过滤器Vue.compone
复制链接

扫一扫

专栏目录