Vue的过滤器

时间：2020-02-24 13:25:01 阅读：66 评论：0 收藏：0 [点我收藏+]

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

过滤器的使用：

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

注意：

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

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

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>

Vue的过滤器

原文：https://www.cnblogs.com/xshan/p/12356013.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)