Vue中如何定义filter过滤器,如何使用过滤器。使用场景
-
vue中过滤器的作用可被用于一些常见的文本格式化,例如:价格前面加上人民币符号(¥)、大小写转换、字符串截取等
-
分类:
- 全局过滤器 和 局部过滤器
- 当全局过滤器和局部过滤器重名时,会采用局部过滤器。
-
过滤器都可以在哪些地方使用呢?
- 过滤器只能在mustache(插值表达式,双花括号)和v-bind中使用
-
使用
//定义全局过滤器 //全局过滤器的定义在 main.js文件中进行,且要在创建 Vue 实例之前全局定义过滤器 //说明: 此方法定义的是一个全局过滤器, name是过滤器名,function是对参数的操作 例如格式化文字等 vue.filter(name,function) Vue.filter('msgFormat', function (value) { if (!value) return '' return "¥" + msg }) // 定义长度为10的过滤器 Vue.filter('length10',(e) =>{ return e.slice(0,10) + '...' }) // 定义转大小写的过滤器 Vue.filter('toUpperCase',(e)=>{ return e.toUpperCase() }) // 定义跳转的连接 Vue.filter('link',(e)=>{ return 'www.' + msg + '.com'; }) //全局过滤器要在创建实例之前定义 new Vue({ // ... }) //在组件中使用全局过滤器 //插值表达式使用过滤器 格式: 前面表示传递的变量 | 后面跟上过滤器名 <p class="rmb">{{ "100" | msgFormat }} {{"s" | toUpperCase}}</p> //一个表达式可以使用多个过滤器 <p class="rmb">{{ "a" | msgFormat | toUpperCase }} </p> //也可以串联起来使用 //v-bind方式使用过滤器 //v-bind方式使用说明: //v-bind是动态设置属性 所以该方式 实际就是动态的改变某个属性 如下面的动态改变 a标签的href属性 <a v-bind:href="'baidu' | link"> 测试v-bind </a> //还可动态改变标签的其他属性 例如改变标签的id属性等 <div v-bind:id="'baidu' | link"> 测试v-bind </div> //所以总结来说 插值表达式的方式用处多为文本格式化 v-bind方式多为改变标签的某个属性 //局部过滤器,私有过滤器 //局部过滤器在具体的组件中定义,filters 与methods平级 //通过filters属性可以定义私有过滤器 <script> filters:{ //filters 与methods平级 dataFormat(msg) { return msg + 'xxxxx'; }, changeClass(tag) { switch (tag) { case 1: return "red" case 2: return "black" default: return "blue" } } } methodsd:{ 。。。。。。 } </script> //使用 <p>{{ '123144' | dataFormat }}</p> //v-bind改变标签的某个属性 例如改变class属性 <div v-bind:class=" '2' | changeClass"> 测试v-bind </div>