VUE过滤器了解

前言

菜鸡的我在vue项目中看到{ { a | b}} 还以为是一元运算符，结果没想到该用法是vue中的过滤器，下面简单介绍下相关知识点

过滤器用法

本文只介绍在vue文件中的局部用法

js代码-数据

  data() {
    return {
      list: "",//过度VUE实列化用的数据
      //初始数据
      dataList: [
        {
          name: "tom",
          age: "12",
          sex: "man",
          id: 1,
        },
        {
          name: "torry",
          age: "14",
          sex: "woman",
          id: 2,
        },
        {
          name: "alise",
          age: "33",
          sex: "man",
          id: 3,
        },
        {
          name: "like",
          age: "55",
          sex: "man",
          id: 4,
        },
        {
          name: "iboy",
          age: "12",
          sex: "man",
          id: 5,
        },
      ],
    };
  },

一、在v-bind中使用

js-代码过滤方法

filters和methods同级

  filters: {
    bindValue(e) {
      console.log("id", e.id);
      return e.id * 10;
    },
  },

HTML代码

<div class="three">
      <p>v-bind中使用</p>
      <ul>
        <li
          :id="item | bindValue"
          v-for="item in dataList"
          :key="item.id | bindValue"
        >
          {
   
   { item.id }}
        </li>
      </ul>
    </div>

效果：

二、在{ {}}插值表达式中使用

JS代码：

 filters: {
    screenAge(e) {
      if (e.age > 12) {
       //得到年纪大于12的数据
        return e.name;
      }
    },
  },

HTML代码：

      <ul>
        <li v-for="item in dataList" :key="item.id">{
   
   { item | screenAge }}</li>
      </ul>

其中item就是数据，screenAge就是过滤的方法，返回的值也就是过滤后的值

效果：

过滤器传参

一个参数

{
   
   {a | b}}

a就作为过滤器的第一个参数

两个参数

{
   
   {a|b(one)}}

三个参数

{
   
   {a|b(one,two)}}

JS代码

  filters: {
    twoValue(e, e1, e2) {
      if (e.name == e1 || e.sex == e2) {
        return e.name;
      }
    },
  },

HTML代码

<div class="three">
      <p>传多个个参数</p>
      <ul>
        <li v-for="item in dataList" :key="item.id">
          {
   
   { item | twoValue("tom", "man") }}
        </li>
      </ul>
    </div>

效果

使用多个过滤器

这里就只对插值表达式中的举列

{
   
   {a | b | c}}

首先 a作为b的第一个参数传给b，b返回结果，然后b的结果作为参数再传给c，这就是使用多个过滤器的方法

不再乘上代码

注意

在过滤其中，不能直接获取到VUE的实列，简单的说就是你想要使用data()中定义的数据，在这里直接this.数据是会报错的，同时也不适用于发起HTTP请求，这里对想要使用data()中定义的数据做出例子

把使用的数据作为参数传入过滤器中，而非直接使用this.数据的方式

HTML代码

<div class="three">
      <p>传多个个参数</p>
      <ul>
        <li v-for="item in dataList" :key="item.id">
          {
   
   { item | twoValue("tom", "man", list) }}
        </li>
      </ul>
    </div>

JS代码

过渡的数据在刚开始已定义，list

  filters: {
    twoValue(e, e1, e2, e3) {
      try {
        console.log("但是可以作为参数的方式传入", e3);
        console.log("过滤器中能获取到VUE实列吗？", this.dataList);
      } catch (e) {
        console.log(e);
      }
      if (e.name == e1 || e.sex == e2) {
        return e.name;
      }
    }
  },
   mounted() {
   //可在生命周期中做处理
    this.list = this.dataList[1].sex;
  },

效果：

可以看到过滤器中直接使用this.dataList出现明显报错

该内容适用于笔者自己回顾用，也希望能帮助到您，觉得繁琐可以看看其他博文，建议看完手打一边