vue定义私有过滤器和基本使用

 更新时间:2021-12-17 12:02:02   作者:佚名   我要评论(0)


私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用,

全局过滤器点这里全局过滤器
使用方法
私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用,
全局过滤器点这里全局过滤器
使用方法也和全局过滤器一致,只是定义的地方不同
全局过滤器是在 script 中 通过Vue.filter 定义
私有过滤器定义方法:
<script>
        let vm = new Vue({
            el:'#app',
            data:{
            
            },
            filters: { // 当前实例私有的过滤器

            }
        })
    </script>
vm实列中,有和 data 同级的 filters,用来定义当前实例的私有过滤器
    <div id="app">
        <p>{{mes | addStr}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一个悲观的人,悲观的人做悲观的事"
            },
            filters: { // 当前实例私有的过滤器
                addStr(data,str="开心"){
                    return data.replace(/悲观/g,str)
                }
            }
        })
    </script>
输出结果为:
如果页面中 有第二个实例,vm2,去调用 vm 中的过滤器,是调用不到的
如果在页面上有一个全局过滤器,和私有过滤器,是可以同时调用的
<div id="app">
        <p>{{mes | setStr | addStr}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.filter('setStr',function(data){
            return data+'我是全局过滤器'
        })

        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一个悲观的人,悲观的人做悲观的事"
            },
            filters: { // 当前实例私有的过滤器
                addStr(data,str="开心"){
                    return data.replace(/悲观/g,str)
                }
            }
        })
    </script>
输出结果:
总结:
在调用时我们在前面调用的 全局 ,后面是私有
但输出结果却是 私有过滤器先进行处理
所以,当同时调用全局和私有过滤器时,调用规则是谁离的近先输出谁,
先私有在全局

到此这篇关于 vue定义私有过滤器和基本使用的文章就介绍到这了,更多相关 vue定义私有过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • vue 过滤器和自定义指令的使用
  • vue 内置过滤器的使用总结(附加自定义过滤器)
  • vue自定义filters过滤器
  • Vue自定义过滤器格式化数字三位加一逗号实现代码
  • vue自定义过滤器创建和使用方法详解
  • Vue-Cli中自定义过滤器的实现代码
  • vue2.0 自定义日期时间过滤器
  • Vue过滤器的用法和自定义过滤器使用

您可能感兴趣的文章:

相关文章

  • vue定义私有过滤器和基本使用

    vue定义私有过滤器和基本使用

    私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器 使用方法
    2021-12-17
  • vue中v-for 循环对象中的属性

    vue中v-for 循环对象中的属性

    目录1、循环对象内的值2、循环对像3、循环键和值1、循环对象内的值 <body> <div id="app"> <!-- 循环对象内的值 -->
    2021-12-17
  • vue实现记事本小功能

    vue实现记事本小功能

    本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下 直接上代码: <!DOCTYPE html> <html lang="en"> <script
    2021-12-17
  • vue插值表达式和v-text指令的区别

    vue插值表达式和v-text指令的区别

    目录1.使用插件表达式2.在插件表达式中使用v-cloak解决闪烁问题3.插件表达式{{message}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达
    2021-12-17
  • JavaScript之String常见的方法详解

    JavaScript之String常见的方法详解

    目录1、charAt语法参数index返回值2、concat语法参数str2 [, …strN]返回值3、indexOf语法参数searchValuefromIndex(可选)返回值特殊情况4
    2021-12-17
  • vue指令v-html和v-text

    vue指令v-html和v-text

    目录1、v-text 文本渲染指令2、 v-html1、v-text 文本渲染指令 (只能渲染文本不能渲染标签) ? <div id="test"> <p v-text="
    2021-12-17
  • vue指令?v-bind的使用和注意需要注意的点

    vue指令?v-bind的使用和注意需要注意的点

    目录1、v-bind:可以为元素的属性绑定一些数据2、v-bind:可以简写成 : 推荐直接写冒号3、v-bind:指令表达式的拼接,1、v-bind:可以为元素的
    2021-12-17
  • JavaScript之Array常见的方法详解

    JavaScript之Array常见的方法详解

    目录不改变原数组的方法1、concat语法:参数:返回值:2、join语法:参数:返回值:注意:3、slice语法:参数:返回值:4、toString语法:返
    2021-12-17
  • vue+webrtc(腾讯云) 实现直播功能的实践

    vue+webrtc(腾讯云) 实现直播功能的实践

    目录1.直播效果2.开直播步骤2.1引入腾讯web端(快直播)脚本2.2在需要使用直播的界面 添加一个视频容器(开启直播后,显示视频的位置)2.3创建直
    2021-12-17
  • JS实现canvas仿ps橡皮擦刮卡效果详解

    JS实现canvas仿ps橡皮擦刮卡效果详解

    目录效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div>
    2021-12-17

最新评论