Vue中过滤器的使用

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>