前端vue过滤器的使用方法（全局和局部过滤器详解）

分类：vue教程时间：2022-12-31 07:30:01

我们来介绍下Vue中的过滤器的使用

过滤器

概念：
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；

分类：过滤器分为全局过滤器和局部过滤器(私有过滤器)

全局过滤器

我们先通过案例来介绍下过滤器的使用，然后再看下何为全局过滤器
过滤器的语法

// 声明过滤器
Vue.filter("过滤器名称","回调函数")

1.简单过滤器的使用

我们先来看下过滤器的简单使用，如下是没有使用过滤器的情况

<!DOCTYPE html>
<html>
<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>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                msg:"今日NBA,保罗换威少,哈哈...NBA新闻真多，大家一起关注NBA..."
            },
            methods: {

            }
        })
    </script>
</body>
</html>