vue的过滤器

什么是过滤器？

过滤器就是一个函数, 传入值返回处理后的值

使用方式

• 插值表达式和v-bind表达式

语法语法:

• Vue.filter("过滤器名", (值) => {return "返回处理后的值"})
• filters: {过滤器名字: (值) => {return "返回处理后的值"}

<template>
  <div>
    <p>原本的数据:{{message}}</p>
    <!-- 过滤
         语法：变量|过滤器名
     -->
     <p>过滤翻转:{{message | rev}}</p>
     <p :title="message | toUp ">鼠标悬停</p>
  </div>
</template>

<script> 

export default {
  data () {
    return {
      message:'Hello Vue'
    }
  },
/*    filters:{
          过滤器名(值){
            return 返回处理的数据
          }
      } 
*/
  filters: {
      //鼠标悬停时显示为大写
      toUp (val) {
      return val.toUpperCase()
    },
    //翻转字符串
    rev(val){
      return val.split('').reverse().join('')
    }
    }
  }

</script>

<style>

</style>

多个过滤器和传参

• 语法:

  • 过滤器传参: vue变量 | 过滤器(实参)
  • 多个过滤器: vue变量 | 过滤器1 | 过滤器2

• 作用 ： 可以同时使用多个过滤器，或者给过滤器传参

<template>
  <div>
    <p>原本的数据:{{message}}</p>
    <!-- 过滤
         语法：变量|过滤器名
     -->
     <p>过滤翻转:{{message | rev}}</p>
      <!-- 过滤
         语法：变量|过滤器1|过滤器2（参数）
     -->
     <p :title="message | toUp | rev（'|'）">鼠标悬停</p>
  </div>
</template>

<script> 

export default {
  data () {
    return {
      message:'Hello Vue'
    }
  },
/*    filters:{
          过滤器名(值){
            return 返回处理的数据
          }
      } 
*/
  filters: {
      toUp (val) {
      return val.toUpperCase()
    },
    rev(val){
      return val.split('').reverse().join('')
    }
    }
  }

</script>

<style>

</style>