24-Vue-自定义全局过滤器

最新推荐文章于 2024-04-28 22:34:19 发布

奔波波灞

最新推荐文章于 2024-04-28 22:34:19 发布

阅读量99

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/m0_57783938/article/details/119807123

版权

vue.js 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-Vue-自定义全局过滤器</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是过滤器?
过滤器和函数和计算属性一样都是用来处理数据的
但是过滤器一般用于格式化插入的文本数据

2.如何自定义全局过滤器
Vue.filter("过滤器名称", 过滤器处理函数):

3.如何使用全局过滤器
{{msg | 过滤器名称}}             <<在插值语法中使用
:value="msg | 过滤器名称"        <<在v-bind中使用

注： msg >> 要被过滤的值

4.过滤器注意点
4.1只能在插值语法和v-bind中使用

4.2过滤器可以连续使用
{{msg | 过滤器1 | 过滤器2 | 过滤器3 }}
前一个处理后的数据是后一个过滤器要处理的数据


-->
<!--这里就是MVVM中的View-->
<div id="app">
    <!--Vue会把name交给指定的过滤器处理之后, 再把处理之后的结果插入到指定的元素中-->
    <p>{{name | formartStr1 | formartStr2}}</p>
</div>
<script>
    /*
    如何自定义一个全局过滤器
    通过Vue.filter();
    filter方法接收两个参数
    第一个参数: 过滤器名称
    第二个参数: 处理数据的函数
    注意点: 默认情况下处理数据的函数接收一个参数, 就是当前要被处理的数据
    * */
    Vue.filter("formartStr1", function (value) {
        // console.log(value);
        value = value.replace(/学院/g, "大学");
        console.log(value);
        return value;
    });
    Vue.filter("formartStr2", function (value) {
        // console.log(value);
        value = value.replace(/大学/g, "幼儿园");
        console.log(value);
        return value;
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            name: "知播渔学院, 指趣学院, 前端学院, 区块链学院"
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>

奔波波灞

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>24-Vue-自定义全局过滤器</title> <script src="js/vue.js"></script></head><body><!--1.什么是过滤器?过滤器和函数和计算属性一样都是用来处理数据的.
复制链接

扫一扫