vue过滤器

vue过滤器-定义使用

目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在, 插值表达式和v-bind表达式

Vue中的过滤器场景

• 字母转大写, 输入"hello", 输出"HELLO"
• 字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"

语法:

• 全局过滤器：Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})

• 局部过滤器：filters: {过滤器名字: (值) => {return “返回处理后的值”}

全局过滤器：

1.先在 main.js 中注册一个全局过滤器

// [].split
// [].reverse
// [].join
Vue.filter('fanzhuan',(str) => {
  return str.split('').reverse().join('')
})

局部过滤器：

在当前的vue文件中

<script>
export default {
data () {
  return {
    msg:'Hello Vue'
  }
},
// 局部过滤器
filters: {
  daxie : (str) => {
    // '' . toUpperCase()
    return  str.toUpperCase()
  }
}
}
</script>

我的：

<template>
  <div>
      <h1>{{msg}}</h1>
      <!-- 过滤器语法    数据 | 过滤器 -->
      <h2>{{msg |fanzhuan}}</h2>
      <h3>{{msg | daxie}}</h3>
      <!-- 可以连续调用多个过滤器加工数据 -->
      <h1>{{msg | daxie | fanzhuan}}</h1>

      <h2 :title="msg | daxie | fanzhuan">鼠标悬停试试</h2>
  </div>
</template>


<script>
export default {
data () {
  return {
    msg:'Hello Vue'
  }
},
// 局部过滤器
filters: {
  daxie : (str) => {
    // '' . toUpperCase()
    return  str.toUpperCase()
  }
}
}
</script>

<style>

</style>