vue过滤器

过滤器

• 作用：文本数据格式化
• 过滤器可以用在两个地方：{{}}和 v-bind 表达式
• 两种过滤器：1 全局过滤器 2 局部过滤器

13.1 全局过滤器

• 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
• 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
• 显示的内容,是由过滤器的返回值决定
• 使用语法: <h1>{{name | myfilter1}}</h1>

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

eg:

<div id="app">
    <h1>{{name | myfilter1}}</h1>
</div>

<script>
    Vue.filter("myfilter1", function (val) {
        return val + "hello";
    });
    var vm = new Vue({
        el: "#app",
        data: {
            name: "丽丽",
        },
    });
</script>

---

13.2 局部过滤器

• 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

<div id="app">
    <h1>{{name | myfilter2}}</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "丽丽",
        },
        filters: {
            myfilter2(val) {
                return "miss" + val;
            }
        }
    });
</script>

---