vue的过滤器

vue的过滤器

注意vue的过滤器只适用于vue2，并不适用于vue3

1.过滤器的定义

过滤器（filters）是为vue为开发者提供的功能，常用于文本的格式化，过滤器可以用在两个地方：插值表达式和v-bind属性绑定里面。
过滤器应该添加在Javascript表达式的尾部，由**“管道符 | ”**进行调用，示例代码如下：

<!--在双花括号中通过“管道符”调用capitalize过滤器，对message的值进行格式化(也就是message作为参数传递给capitalize函数，函数都有返回值，所以双花括号返回的值是函数的值)-->
<p>{{ message | capitalize }}</p>
<!-- 在v-bind中通过“管道符”调用formatId过滤器，对rawId的值进行格式化-->
<div v-bind:id="rawId | formatId"></div>

2. 过滤器的注意点

1. 要定义到filters节点下，本质是一个函数
2. 在过滤器函数中，一定要有return
3. 在过滤器的形参中，就可以获取到管道符前面的参数

3.示例

<div id="app">
  <p>message的值是:{{ message | capi}}</p>
</div>
<script>
  const vm = new Vue({
    el : '#app',
    data:{
      message:'hello vue.js'
    },
    //过滤器函数必须被定义到filters节点之下；过滤器本质上是一个函数
    filters:{
      //过滤函数的形参val 代表的都是 | 前面的值
      capi(val){
        //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
        const first = val.charAt(0).toUpperCase();
        //字符串的slice方法，可以截取字符串，从指定索引往后截取
        const other = val.slice(1)
      //  强调过滤器中，一定要有一个返回值
        return first+ other;
      }
    }
  })
</script>

4. 私有过滤器和全局过滤器

在filters节点下定义的过滤器，成为“私有过滤器”，因为它只能当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。
全局过滤器一定要写在vue实例之前

// 全局过滤器——独立于每个vm实例之外
//vue.filter()方法接收两个参数
//第1个参数，是全局过滤器的“名字”
//第2个参数，是全局过滤器的“处理函数”
vue.filter('capi',(str)=>{
	return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

5. 私有过滤器和全局过滤器的特点

全局过滤器一定要放在vue的实例前面

1. 全局过滤器和私有过滤器根据 “就近原则” ，举例：如果某个vue实例中内部已定义filters， 则不会调用全局过滤器。

<div id="app">
  <p>message的值是:{{ message | capi}}</p>
</div>

<div id="app2">
  <p>message的值是:{{ message | capi}}</p>
</div>
<script>
  Vue.filter('capi',(str)=>{
    //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
    const first = str.charAt(0).toUpperCase();
    //字符串的slice方法，可以截取字符串，从指定索引往后截取
    const other = str.slice(1)
    //  强调过滤器中，一定要有一个返回值
    return first+ other + '~~~';
  })

  const vm = new Vue({
    el : '#app',
    data:{
      message:'hello vue.js'
    },
    //过滤器函数必须被定义到filters节点之下；过滤器本质上是一个函数
    filters:{
      //过滤函数的形参val 代表的都是 | 前面的值
      capi(val){
        //字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
        const first = val.charAt(0).toUpperCase();
        //字符串的slice方法，可以截取字符串，从指定索引往后截取
        const other = val.slice(1)
        //  强调过滤器中，一定要有一个返回值
        return first+ other;
      }
    }
  })
  const vm2 = new Vue({
    el : '#app2',
    data:{
      message:'hug.js'
    }
  })

6.过滤器的其他用法

1.过滤器传参—— 过滤器的本质是Javascript函数，因此可以接受参数，格式如下：

<!--arg1 和 arg2 是传递给 filterA 的参数-->
<p>{{ message | filterA (arg1,arg2) }}</p>

//过滤器处理函数的形参列表中：
//第一个参数：永远都是”管道符“前面待处理的值
//从第二个参数开始，才是调用过滤器时传递过来的arg1 和 arg2 参数
Vue.filter('filterA',(msg,arg1,arg2)=>{
	//过滤器的代码逻辑
})

2. 连续调用多个过滤器

<!-- 把message的值，交给dateFormat进行处理 -->
<!-- 把dateFormat处理的结果，再交给后面处理 -->
<!-- 最终把结果作为最终值渲染到页面上 -->
<td> {{ item.time | dateFormat | xxx | yyy | zzz }} </td>

资料整理来自于：黑马程序员