Vue的过滤器

    　　过滤器是数据在真正渲染到页面的时候，可以使用过滤器对数据进行一些处理，把最终处理的结果渲染到网页中。

    过滤器的使用：

    　　过滤器可以用在两个地方：`{{ }}`和`v-bind`表达式。过滤器应该被添加在`JavaScript`的尾部通过管道符（"|"）进行分割。

    注意：

  1.    需要写在创建实例之前。
  2.    `function`的第一个参数必须是要处理的值，不能是其他作用的参数。
  3.    可以多个过滤器连用。前提是这些过滤器在没有冲突的时候。

    过滤器分为全局过滤器和局部过滤器：

    1）全局过滤器：
        绑定在Vue上。
    2）局部过滤器：
        在组件中创建的过滤器只能在组件中用。
　 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Vue过滤器</title>
</head>

<body>
    <div id="app">
        <p>{{user|strip}}</p>
        传递参数
        <p>{{user|strip2('*')}}</p>
        过滤器串联
        <p>{{user|strip|hello}}</p>
    </div>
    <script>
        // 全局变量
        Vue.filter("strip", function (value) {
            return value.replace(" ", "")
        })
        Vue.filter("strip2",function(value,string){
            return value.replace(" ",string)
        })
        Vue.filter("hello",function(value){
            return "hello" + value 
        })
        new Vue({
            el: "#app",
            data: {
                user: "X san"
            },
        })
    </script>
</body>

</html>

 

posted @ 2020-02-24 10:58  xsan  阅读(186)  评论(0)  编辑  收藏  举报