vue学习小记-过滤器

最新推荐文章于 2024-05-04 15:52:14 发布

cqy5071021

最新推荐文章于 2024-05-04 15:52:14 发布

阅读量135

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/cqy5071021/article/details/105995868

版权

过滤器

过滤器使用范围:

只能用在{{ }}表达式和v-bind中

过滤器格式

      Vue.filter('过滤器名称', function (data,参数) {//data是需要过滤的数据,
            return ...........
      })

实例

<!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>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id='app'>
        <p>{{ msg }}</p>
        <!-- 页面输出为:我TMD还是曾经那个少年,没有TMD一丝丝改变 -->
        <p>{{ msg | ftr }}</p>
        <!-- 页面输出为:我还是曾经那个少年,没有一丝丝改变 -->
        <p>{{ msg | msgFormat('他妈的') }}</p>
        <!-- 页面输出为:我他妈的还是曾经那个少年,没有他妈的一丝丝改变 -->
    </div>
    <script>
        // 定义全局过滤器
        Vue.filter('msgFormat', function (data, n) {//data是需要过滤的数据,在这里就是msg
            return data.replace(/TMD/g, n)
        })

        Vue.filter('ftr', function (data) {//data是需要过滤的数据,在这里就是msg
            return data.replace(/TMD/g, '')
        })



        var vm = new Vue({
            el: "#app",
            data: {
                msg: '我TMD还是曾经那个少年,没有TMD一丝丝改变'
            },
            methods: {

            },
            filters:{//这是定义私有过滤器,私有过滤器只在当前的new Vue实例里有效,在另一个实例里无法调用,而全局过滤器是所有实例都有效,如果私有个全局同名,优先调用私有,就近原则
                fitName:function(){//fitName是过滤器名称
                    return data.replace(/TMD/g, '')
                }
            }
        })
    </script>
</body>

</html>

cqy5071021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习小记-过滤器

过滤器过滤器使用范围:只能用在{{ }}表达式和v-bind中过滤器格式 Vue.filter('过滤器名称', function (data,参数) {//data是需要过滤的数据, return ........... })实例<!DOCTYPE html><html lang="en"><head...
复制链接

扫一扫