vue过滤器 filter

vue过滤器-定义使用

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

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

语法：

• VUE.filter(“过滤器名”，（值) =>{return "返回处理后的函数的值"}) 
• filters：{过滤器的名字：（值）=>{return "返回处理后的值"}}

全局过滤器写在  main.js

局部过滤器写在  App.vue 的exprot default 里面

<template>
  <div>
    <p>原来的样子:{{ msg }}</p>
    <p>翻转后:{{ msg | reverse }}</p>
    <p>大写:{{ msg | toUp }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
  // 局部过滤器
  filters: {
    toUp(val) {
      return val.toUpperCase();
    },
  },
};
</script>

<style>
</style>

//main.js 里面
// 全局过滤器
Vue.filter('reverse',  (value) =>{
  return value.split('').reverse().join('')
 
})

 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.

全局注册最好在main.js中注册，一处注册到处使用

vue过滤器-传参和多过滤器

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

 语法：

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