Vue过滤器和插件的学习_ref<{ code: string; name: string; }[]>-CSDN博客

本文链接：https://blog.csdn.net/weixin_43288858/article/details/105395708

全局过滤器：

Vue.filter(过滤器名称, function (value1[,value2,...] ) {
  // 数
  }

局部过滤器：
在Vue实例中使用 filter 选项，当前实例范围内可用

new Vue({
    filters: {
      过滤器名称: function (value1[,value2,...] ) {
        // 数据处理逻辑
     }
   }

过滤器可以用在两个地方：双花括号 {{}} 和 v-bind 表达式

<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>测试单个参数</h3>
        <p>
            {{content|contentFilter}}
        </p>
        <!-- 输入框显示 -->
        <input type="text" :value="content|contentFilter">
        <p>
            {{content|contentFilt}}
        </p>
        <P>综合{{one|add(two,three)}}</P>
        <input type="text" :value="one|add(two,three)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter('contentFilter', function (value) {
            if (!value) {
                return ''
            }
            return value.toString().toUpperCase().replace('HHH', '***').replace('SB', '***')
        })
        new Vue({
            el: '#app',
            data: {
                content: '小伙子，hhh就是sb',
                one:90,
                two:89,
                three:899
            },
            // 定义局部过滤器，也就是只能在el:"#app"里面使用
            filters:{ //定义局部，过滤器
                contentFilt(value){//contentFilt 过滤名，value

                    if(!value){
                        return ''

                    }
                    return  value.toString().toUpperCase().replace("HHH","***").replace("SB","***")
                },
                add(num1,num2,num3){
                    return num1+num2+num3
                }

            }

        })


    </script>
</body>

</html>

在这里插入图片描述

第一个参数写在前面，后面参数分两个写在传入

自定义Vue插件

插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
2. Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
3. 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.
在这里插入图片描述