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

2024-04-11 09:47:05

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

全局过滤器点这里全局过滤器

使用方法也和全局过滤器一致，只是定义的地方不同

全局过滤器是在 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自定义过滤器格式化数字三位加一逗号实现代码

前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>
vue自定义filters过滤器

官方给出 Vue.filters(id , [definition]) //id {string} //definition {function} 详情查看在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器文件目录下面贴上代码: //index.js // 引入所有的过滤函数 import readMore from './readMore'; // 导
vue自定义过滤器创建和使用方法详解

本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下过滤器:生活中有很多例子,净水器空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建过滤器的本质是一个有参数有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用语法: <any
Vue-Cli中自定义过滤器的实现代码

本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记 vue2里面移除了内置过滤器,所有过滤器都需要自己定义. 以下例子是使用webpack模版自定义一个日期格式过滤器的例子. 文件结构 . ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ... 所有过滤器都放在Filters文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来. Filters/D
vue 过滤器和自定义指令的使用

过滤器 01. 是什么过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果过滤器不会修改数据过滤器的本质是函数过滤器函数应该有参数,参数必须包含你想进行处理的源数据过滤器应该有返回值,返回处理后的结果 export default { // 通过filters创建局部过滤器 filters:{ 过滤器名称(data){ // 对传入的data 进行处理 return 处理结果 } } } 02. 怎么做 (1)定义过滤器局部过滤器:定义在组件内部,只能在当前组件内使用通过fi
Vue过滤器的用法和自定义过滤器使用

1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO
vue2.0 自定义日期时间过滤器

方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var
vue 内置过滤器的使用总结(附加自定义过滤器)

前言 vue中过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档. 能够帮我们处理快速一些数据的格式----format数据格式化处理. 语法也很简单 {{ message | Filter }} message: 要格式化的数据 Filter: 对数据格式化的方法链式过滤 VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们
vue定义私有过滤器和基本使用

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

Vue允许自定义过滤器可被用作一些常见的文本格式化过滤器可以用在两个地方:mustache插值表达式和 v-bind表达式过滤器应被添加在JavaScript表达式的尾部由"管道"符指示(管道符就是一个竖杠:|) 一.全局过滤器全局过滤器调用时的基本格式: 通过管道符[|]来进行过滤例如{{name | nameOpe}} 定义过滤器的语法:Vue.filter("过滤器名称",处理函数) 处理函数的第一个参数已被固定了是data 即管道符前面传递的
vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ name | Upper }}  <div v-bind:id="martin | Upper
vue中的过滤器及其时间格式化问题

一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由管道符号指示:  {{ message | capitalize }}  <div v-bind:id="rawId | formatId">
Vue封装全局过滤器Filters的步骤

(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何封装全局filter 并统一处理. 一.定义/封装过滤器在 src目录下新建 filters目录用来专门存放全局过滤器,如果项
java9在interface中定义私有方法详解

一.Java 9接口定义私有方法从Java 9开始,我们可以在Interface接口中添加private的私有方法和私有静态方法.这些私有方法将改善接口内部的代码可重用性.例如,如果需要两个默认方法来共享代码,则私有接口方法将允许它们共享代码,但不将该私有方法暴露给它的实现类调用(后文中会给大家举一个例子). 在接口中使用私有方法有四个规则: 接口中private方法不能是abstract抽象方法.因为abstract抽象方法是公开的用于给接口实现类实现的方法,所以不能是private. 接口
VUE中filters过滤器的两种用法实例

目录前言一.全局过滤器全局过滤器之单一挂载全局过滤器之批量挂载二.组件过滤器附:过滤器中传入多个参数总结前言 Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示.  <div>{{ message | capitaliz
Vue中的过滤器(filter)详解

目录过滤器使用位置全局过滤器.局部过滤器全局过滤器: 局部过滤器: 过滤器中传入多个参数: 多个过滤器串联: 官方文档:https://cn.vuejs.org/v2/guide/filters.html 在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 个人觉得称它为加工车间会更加贴切一些,过滤器可以用来筛选出符合条件的,丢弃不符合条件的:加工车间既可以筛选,又可以对筛选出来的进行加工.
Ruby定义私有方法(private)的两种办法

#定义私有方法途径1: class C def public_method private_method end def private_method end private :private_method #定义方法为私有 end #定义私有方法途径2: class C def public_method private_method end private def private_method #定义私有方法 end end C.new.public_method

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

相关推荐

随机推荐