vue定义私有过滤器和基本使用
私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用,
全局过滤器点这里全局过滤器
使用方法也和全局过滤器一致,只是定义的地方不同
全局过滤器是在 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过滤器的用法和自定义过滤器使用
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO
-
vue 内置过滤器的使用总结(附加自定义过滤器)
前言 vue中过滤器filters的作用是什么? 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档. 能够帮我们处理快速一些数据的格式----format数据格式化处理. 语法也很简单 {{ message | Filter }} message: 要格式化的数据 Filter: 对数据格式化的方法 链式过滤 VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们
-
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自定义过滤器创建和使用方法,供大家参考,具体内容如下 过滤器:生活中有很多例子,净水器 空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用 语法: <any
-
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-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定义私有过滤器和基本使用
私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器 使用方法也和全局过滤器一致,只是定义的地方不同 全局过滤器是在 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 }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper
-
vue中的过滤器及其时间格式化问题
一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <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
随机推荐
- HTTP 错误 403.1 - 禁止访问:执行访问被拒绝。 解决方法该页无法显示
- Java 操作Properties配置文件详解
- 饺子的发明
- 微信小程序 wx.request(接口调用方式)详解及实例
- 建立自由的会计日期的报表
- Spring Boot+AngularJS+BootStrap实现进度条示例代码
- Java 两种延时thread和timer详解及实例代码
- 基于获取JAVA路径,包括CLASSPATH外的路径的方法详解
- 过期软件破解办法实例详解
- javascript中sort排序实例详解
- Asp.Net实现无限分类生成表格的方法(后台自定义输出table)
- asp.net 组合模式的一个例子
- php检测用户是否用手机(Mobile)访问网站的类
- windows下vue-cli及webpack搭建安装环境
- JavaScript使用键盘输入控制实现数字验证功能
- javascript适合移动端的日期时间拾取器
- Java生成随机数的方法
- Flash 实用代码总汇第1/2页
- 详解Ubuntu 从零开始搭建Python开发环境
- Android GPS定位详解及实例代码