DDR爱好者之家 Design By 杰米
vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示:
过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等。
例如:{{ date | dateFormat }}这
是过滤器的写法;{{ dateFormat(date) }}
这是函数调用的写法
可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义。
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> <!-- 也可以串联多个过滤器 --> {{ message | filterA | filterB }}
// 在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中
<!-- 过滤器接收参数 --> {{ message | capitalize('string', obj) }}
// 这里的参数将在过滤器函数内以第二个参数开始算起第一个参数为要过滤的值message,即'string'为第二个参数,obj为第三个参数。
过滤器方法在接收到参数后,你可以在方法内进行一系列的处理,最终return出处理结果即可。
1、过滤器可以是组件内的
filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }
2、过滤器也可以是挂载在全局Vue里
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
总结
以上所述是小编给大家介绍的vue 过滤器filter实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月24日
2024年04月24日
- 群星.1997-宝丽金88极品音色系列·合唱碟王1+2【宝丽金】【WAV+CUE】
- dnf最值得幻化的四把武器
- dnf机械七战神实验室怎么进
- dnf机械七战神首领
- 凤凰传奇《舞动奇迹》wav
- 群星-最热最好听的DJ舞曲《你牛什么牛[中文舞曲]》[WAV+CUE]
- 重低音串烧版DJ舞曲HiFi发烧碟wav
- 任天堂确认:不会出席今年的科隆游戏展
- 曝Switch 2或采用三星第5代V-NAND:读取速度提升
- 《星刃》发售倒计时五天!欢迎来到破败都市Xion
- 王杰《故事的角色》[WAV+CUE][480MB]
- 群星《诛仙动画》[320K/MP3][116.43MB]
- 群星《诛仙动画》[FLAC/分轨][444.15MB]
- 弦子.2024-需要多久才能看完一场日落【华纳】【FLAC分轨】
- 林海峰.2017-九号鞋(EP)【东亚】【WAV+CUE】