vue之过滤器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在vue2.0以前的版本中vue内置的过滤器，但是因为缺乏纯JavaScript的灵活性，现在vue2.0版本中已经删除了内置过滤器，所以需要自己注册过滤器，我们可以定义本地（在某一个template里面定义filter）过滤器，或者定义全局（global）过滤器。需要提醒的是，如果你定义了一个全局过滤器，它必须在Vue实列之前定义，以上两种方式，我们将传递value作为参数。

全局过滤器

下面定义一个全局过滤器，用于在数据前加上大写的VUE。需要注意的是，过滤器定义必须始终位于Vue实例之上，否则会报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">{{message | toAdd}}</div>
    <script>
        Vue.filter("toAdd",function(value){
            return 'VUE' + value
        })
        var demo = new Vue({
            el: '#demo',
            data: {
            message: '过滤器',
            }
        })
    </script>    
</body>
</html>

本地过滤器

本地过滤器存储在vue组件中，作为filters属性中的函数，我们可以注册多个过滤器存储在其中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>{{message | Reverse}}</p>
        <p>{{message | Length}}</p>
    </div>
    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: '过滤器',
            },
             filters: {
                Reverse: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.split('').reverse().join('')
                },
                Length: function(value){
                    return value.length
                } ,
            },
        })
    </script>    
</body>
</html>

串联过滤器

过滤器除了单独使用之外，我们还可以对过滤器进行串联使用，也可以在v-bind中使用过滤器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        .color{
            color:red;
        }
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>{{message | Reverse | Length}}</p>
        <div :class="raw | format">在v-bind表达式中使用过滤器</div>
    </div>
    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: '过滤器',
                raw:'roloc'
            },
             filters: {
                Reverse: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.split('').reverse().join('')
                },
                Length: function(value){
                    return value+value.length
                } ,
                format:function(value){
            return value.split('').reverse().join('')
          } 
            },
        })
    </script>    
</body>
</html>

过滤器传参

在vue1.0中，我们向过滤器传递参数时，直接用引号引起来放在过滤器后面就可以了，但是在vue2.0中，需要将参数全部放在括号里面后再接在过滤器后面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="vue.js"></script> 
</head>
<body>
     <div id="box">
        {{msg1 | toDou('12','5')}}
        {{msg2 | toDou('12','5')}}
    </div>
    <script>
        Vue.filter('toDou',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        new Vue({
            el:'#box',
            data:{
                msg1:9,
                msg2:12,
            }
        });
    </script>
</body>
</html>

双向过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="msg | filterHtml">
        <br>
        {{msg}}
    </div>
     <script>
        Vue.filter('filterHtml',{
            read:function(input){ //model-view
                return input.replace(/<[^<]+>/g,'');
            },
            write:function(val){ //view -> model
                return val;
            }
        });
        var vm=new Vue({
            data:{
                msg:'<span>welcome</span>'
            }
        }).$mount('#box');
    </script>
</body>
</html>

以上是 vue之过滤器 的全部内容， 来源链接： utcz.com/z/376803.html

回到顶部