越秀网站建设推广,上海计算机一级网页制作,恶意点击广告软件,淘宝运营培训内容前言
上篇文件讲述了#xff0c;Vue全局过滤器的基本使用#xff1a;Vue过滤器的基本使用
本篇将延续上文#xff0c;讲述vue中过滤器的进阶操作
过滤器传参
如果有一天#xff0c;多个地方使用过滤器#xff0c;而且需要传递参数#xff0c;那么可以这么写 多个过滤…前言
上篇文件讲述了Vue全局过滤器的基本使用Vue过滤器的基本使用
本篇将延续上文讲述vue中过滤器的进阶操作
过滤器传参
如果有一天多个地方使用过滤器而且需要传递参数那么可以这么写 多个过滤器串联使用
多个过滤器直接是可以串联的使用 |(管道符)xxx拼接即可 比如我要转化后截取当前年就可以这么写 全局过滤器
现在写的filter过滤器都是局部的只能在vm中使用但是如果有组件比如组件A写了一个filterA过滤器组件B写了一个filterB过滤器那么组件B就不能使用filterA当然组件A也不能使用filterB如何解决这个问题呢就要使用全局过滤器 通过例子验证说明局部过滤器现在再写一个div容器创建一个vue实例 现在我觉得msg的内容太长了想调用截取过滤器 看到报错了说不能找到过滤器mySlice强有力的证明了局部过滤器的局限性 如果想开启全局的过滤器配置可以使用命令 // 注册全局过滤器 注意vue中过滤器是filters,在这里是filter//需要先准备过滤器再创建实例顺序不能错Vue.filter(mySlice,function(value){return value.slice(0,4)})查看页面使用过滤器成功 v-bind使用过滤器
过滤器不止是只能写在插值语法里面的还可以写在v-bind但是通常这些写法比较少下面一起看下把 比如这个例子很明显有多余的字符我就可以使用过滤器截取 查看页面截取到了 只能配合插值语法或者v-bind使用使用v-model会报错的这里就不演示了 总结
过滤器 定义对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理过于复杂的可以使用计算属性) 语法 1注册过滤器Vue.filter(name,callback)或new Vue(filters:{}) 2使用过滤器{{xxx | 过滤器名称}}或v-bind:属性“xxx” | 过滤器名称 备注 1过滤器也可以接收额外参数多个过滤器之间可以配合使用 2并没有改变原来的数据是产生新的对应的数据
