Vue过滤器和自定义过滤器
来源:互联网 发布:c语言中的temp 编辑:程序博客网 时间:2024/05/27 20:13
1、过滤器的用法,用 ‘|' 分割表达式和过滤器。
Vue.js 1.x有内置过滤器,但是2.0中已经废弃了过滤器,需要我们自定义。Vue.js 自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind
表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:
<!-- in mustaches -->{{ message | capitalize }}<!-- in v-bind --><div v-bind:id="rawId | formatId"></div>
Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind
表达式 (后者从 2.1.0 起支持) 中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。
过滤器函数总接受表达式的值作为第一个参数。
<template> <div> <h1>{{message | capitalize}}</h1> </div></template><script>export default { data () { return { message: 'vue filter' } }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }}</script>
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,字符串 'arg1'
将传给过滤器作为第二个参数, arg2
表达式的值将被求值然后传给过滤器作为第三个参数。
2、自定义的过滤器
过滤器的结构为:Vue.filter("id",function(value,a){});
value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。
<template><div> <!--输出的字符串中a的个数--> <span>msg的值:{{msg}},其中a的个数:</span> {{msg | myfilter('a')}} <br></div></template><script>export default { data () { return { msg: 'a1a1aba2babac' } }, filters: { myfilter (value, arg) { let s = value.split('') let n = 0 s.forEach((elem) => { if (elem === arg) { n++ } }) return n } }}</script>
阅读全文
0 0
- Vue过滤器和自定义过滤器
- Vue自定义过滤器
- Vue自定义过滤器
- Vue---自定义过滤器
- Vue自定义过滤器
- Vue之自定义过滤器
- vue自定义过滤器
- vue 2.0 自定义过滤器
- vue 过滤器和自定义指令、组件
- vue.js2.0自定义过滤器
- VUE自定义过滤器(注册在Vue全局)
- Vue--过滤器
- Vue 过滤器
- vue过滤器
- vue过滤器
- vue--过滤器
- vue-过滤器
- Vue--过滤器
- HTML和CSS的注释方式及其作用
- Manacher算法总结
- (数据结构)二叉树的基本操作
- 关于按位与和按位或以及左/右移的相关知识
- Java设计模式之适配器模式
- Vue过滤器和自定义过滤器
- Java四种线程池的使用
- html和css和的注释方式及作用
- 关于telnet登录
- BZOJ1001狼抓兔子
- AlertDialog图片文本列表
- 前台系统首页面的广告问题
- 香港云主机CentOS系统上安装strongSwan搭建IPsec VPN服务器
- XGBoost 与 Boosted Tree 原理