Vue记忆结构(四) vue过滤器语法及实例

最新推荐文章于 2024-07-04 10:07:27 发布

光头和尚111

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量211

点赞数

分类专栏： vue 文章标签： vue过滤器的使用

本文链接：https://blog.csdn.net/qq_42838723/article/details/88563539

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 作用:
不改变数据的前提下，设置输出前端需要的格式
定义方法：
Vue.filter(‘mingzi’,function(value){
//处理方法
});

调用方法：
{{ msg | mingzi }}

注意：
定义过滤器，必须放在所有实例前面
在没有冲突的情况下，过滤器可以串联

2.过滤器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue拦截器</title>
    <script type="text/javascript" src="vue.min.js"></script>
    <script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="qingqiu">

    <h1>{{ msg|hello|hello2}}</h1>
</div>
<script type="text/javascript">
    <!--定义的拦截器必须放在所有实例之前-->
    Vue.filter('hello',function (val) {
        return val+'你好';
    });

    Vue.filter('hello2',function (val) {
        return "亲爱的"+val;
    });

    var vm=new Vue({
        el:'#qingqiu',
        data:{
            msg:"wanghaha"
        },
    });

</script>
</body>
</html>