【vue笔记】5.过滤器

vue允许在mustache插值和v-bind使用过滤器，用于对一些常见文本进行格式化。
过滤器是对原数据进行修改后再显示，不会修改原数据的内容。
例如下面这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{msg | msgFormat}}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg){
           return msg.replace('test','page')
        })

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'this is a simple test'
            }
        })    
    </script>
</body>
</html>

原来数据中的msg是字符串"this is a simple test"，经过过滤器后显示为"this is a simple page"：
在这里插入图片描述

同时，还可以在过滤器中加入参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{msg | msgFormat('word')}}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg,arg){
           return msg.replace('test',arg)
        })

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'this is a simple test'
            }
        })    
    </script>
</body>
</html>

上面这段代码将过滤器中的参数替换原数据中的"text"，最后显示为：
在这里插入图片描述

此外，还可以在过滤器中添加多个参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{msg | msgFormat('+++++','*******')}}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg,arg,arg1){
           return arg+msg+arg1
        })

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'this is a simple test'
            }
        })    
    </script>
</body>
</html>

显示效果为：
在这里插入图片描述

还可以同时使用多个过滤器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p>{{msg | msgFormat('+++++','*******') | msgFormat1('~~~~~')}}</p>
    </div>
    <script>
        Vue.filter('msgFormat',function(msg,arg,arg1){
           return arg+msg+arg1
        })
        Vue.filter('msgFormat1',function(msg,arg){
            return msg+arg
        })

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'this is a simple test'
            }
        })    
    </script>
</body>
</html>

显示效果为：
在这里插入图片描述

【vue笔记】5.过滤器

猜你喜欢