Vue-过滤器和插件

VUE vue

创建时间:2019-12-08 15:37

字数:352 阅读:

过滤器
1. 什么是过滤器
2. 使用方法

过滤器

什么是过滤器

过滤器是将要显示的文本,进行格式化处理，然后显示处理，并没有改变原值

使用方法

全局方式

1
2
3

Vue.filter('过滤器名称',function(value1,[value2,value3,...]){
    <!--处理逻辑-->
})

局部模式,仅在当前vue实例中使用

var vm = Vue({
    el:"#app",
    filter:{
        '过滤器名称':function(value1,[value2,value3,...]){
        }
    }
})

使用范围

v-bind

1 2	<div v-bind:id="属性名称\|过滤器名称"></div> <div v-bind:id="属性名称\|过滤器名称(value1,value2)"></div>

大括号

1 2	<div>{{属性名\|过滤器名称}}</div> <div>{{属性名\|过滤器名称(value1,value2)}}</div>

示例

<body>
    <div id="app">
        <h3>测试过滤器单个参数</h3>
        <p>{{content|contentFilter}}</p>
        <input type="text" :value="content|contentFilter">
        <h3>测试过滤器多个参数</h3>
        <p>{{score1|contentFilter02(score2,score3)}}</p>
        <input type="text" :value="score1|contentFilter02(score2,score3)">

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter('contentFilter',function (value) {
            if(!value){
                return ''
            }
            return value.toString().toUpperCase().replace('TMD','***').replace('SB','***')
        })
        var vm = new Vue({
            el: "#app",
            data:{
                content: "You are SB，TMD",
                score1:98,
                score2:92,
                score3:96,
            },
            filters:{
                contentFilter02(v1,v2,v3){
                    return v1+v2+v3
                }
            }

        })
    </script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

Vue-过滤器和插件

过滤器

什么是过滤器

使用方法