Vue数组过滤详解

Vue.js是一款轻量级的前端框架，对于数组过滤功能提供了很好的支持。在Vue中，数组过滤通常用于对列表数据进行筛选，过滤掉用户不需要的数据。下面我们将从多个方面对Vue数组过滤进行详细的阐述。

一、Vue数组过滤器

Vue.js中提供了一种过滤器的功能，可以对展示的数据进行格式化和过滤。这种功能在Vue.js应用中非常常见，也非常实用。

例如，我们有一个数组，其中存放了一些数字，我们想将里面的数字都乘以2，然后再输出到模板中，我们可以这样实现:

  
    <div v-for="item in numbers | filterMethod">
      {{ item }}
    </div>

    ....

    methods: {
      // 自定义过滤器方法，将数字乘以2
      filterMethod(arr) {
        return arr.map(item => item * 2);
      }
    }
  

通过这种方式，我们可以将数组中的数据进行二次处理，然后输出到模板中。

二、Vue列表过滤

针对Vue.js列表数据，我们可以使用filter()函数进行过滤，该函数接收一个回调函数作为参数，对于回调函数返回值为true的数据进行过滤。

例如，我们有一个列表，其中存放了一些学生的信息，我们想要过滤出其中的女生信息，我们可以这样实现：

  
    <ul>
      <li v-for="item in students.filter(student => student.gender === '女')">
        {{ item.name }}
      </li>
    </ul>

    ....

    data() {
      return {
        // 列表数据
        students: [
          { name: '张三', gender: '男' },
          { name: '李四', gender: '女' },
          { name: '王五', gender: '男' },
          { name: '赵六', gender: '女' }
        ]
      }
    }
  

通过这种方式，我们可以轻松地实现对列表数据的过滤。

三、Vue数组过滤数据

除了通过Vue提供的filter()函数进行过滤外，我们还可以使用JavaScript自带的filter()函数进行数组过滤。

例如，我们有一个数组，其中存放了一些数值，我们想要过滤出其中的偶数，我们可以这样实现：

  
    <div v-for="item in numbers.filter(number => number % 2 === 0)">
      {{ item }}
    </div>

    ....

    data() {
      return {
        // 数组数据
        numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      }
    }
  

通过这种方式，我们可以轻松地实现对数组数据的过滤。

四、Vue过滤特殊字符

在实际场景中，我们有时需要对文本框中输入的内容进行过滤，过滤掉其中的特殊字符。

例如，我们有一个文本框，需要过滤掉其中的特殊字符，我们可以这样实现：

  
    <input v-model="inputText" type="text" />
    <div>{{ inputText | filterChar }}</div>

    ....

    methods: {
      // 自定义过滤器方法，过滤特殊字符
      filterChar(text) {
        return text.replace(/[^\w\d]/g, '');
      }
    }
  

通过这种方式，我们可以轻松地过滤掉用户输入中的特殊字符，保证数据的安全性。

五、Vue数组过滤重复数据

在Vue.js中，我们还可以使用Set对象来过滤重复数据，Set对象是一种特殊的数据结构，其中的数据是唯一的，不会有重复。

例如，我们有一个数组，其中存放了一些数字，我们想要过滤掉其中的重复数据，我们可以这样实现：

  
    <div v-for="item in Array.from(new Set(numbers))">
      {{ item }}
    </div>

    ....

    data() {
      return {
        // 数组数据
        numbers: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
      }
    }
  

通过这种方式，我们可以轻松地过滤掉数组中的重复数据，保证每个数据都是唯一的。

六、Vue过滤数据

在Vue.js中，我们还可以使用filter()方法对数据进行过滤。

例如，我们有一组数据，其中包含了一些商品信息，我们想要过滤出其中价格低于100元的商品，我们可以这样实现：

  
    <ul>
      <li v-for="item in goods.filter(good => good.price < 100)">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>

    ....

    data() {
      return {
        // 数据列表
        goods: [
          { name: '商品1', price: 80 },
          { name: '商品2', price: 120 },
          { name: '商品3', price: 60 },
          { name: '商品4', price: 150 }
        ]
      }
    }
  

通过这种方式，我们可以轻松地过滤出价格低于100元的商品信息，方便用户进行挑选。

七、Vue过滤数组对象

在Vue.js中，我们还可以使用filter()方法对数组对象进行过滤，通过对属性进行筛选实现对数组对象的过滤。

例如，我们有一个数组，其中存放了一些人的信息，包括姓名、年龄和性别，我们想要过滤出其中性别为女性的人的信息，我们可以这样实现：

  
    <ul>
      <li v-for="item in persons.filter(person => person.gender === '女')">
        {{ item.name }} - {{ item.age }} - {{ item.gender }}
      </li>
    </ul>

    ....

    data() {
      return {
        // 数组对象
        persons: [
          { name: '张三', age: 18, gender: '男' },
          { name: '李四', age: 22, gender: '女' },
          { name: '王五', age: 25, gender: '男' },
          { name: '赵六', age: 20, gender: '女' }
        ]
      }
    }
  

通过这种方式，我们可以轻松地过滤出性别为女性的人员信息，方便用户进行查看。

八、Vue中filter过滤数组

Vue中提供了一个filter选项，可以用于对数组对象进行过滤，该选项接收一个过滤函数，对于函数返回值为true的对象进行过滤。

例如，我们有一个列表，其中存放了一些商品信息，我们想要过滤出其中价格小于100元的商品信息，我们可以这样实现：

  
    <ul>
      <li v-for="item in goods | filterPrice">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>

    ....

    data() {
      return {
        // 数组数据
        goods: [
          { name: '商品1', price: 80 },
          { name: '商品2', price: 120 },
          { name: '商品3', price: 60 },
          { name: '商品4', price: 150 }
        ]
      }
    },

    filters: {
      // 自定义过滤器方法，过滤价格低于100元的商品
      filterPrice(arr) {
        return arr.filter(item => item.price < 100);
      }
    }
  

通过这种方式，我们可以轻松地过滤出价格小于100元的商品信息，方便用户进行查看。

九、Vue过滤list

在Vue.js中，我们还可以通过手动筛选的方式对列表数据进行过滤，具体方法如下：

  
    <template>
      <div>
        <input type="text" v-model="searchTxt">
        <ul>
          <li v-for="item in searchList">{{ item.name }} - {{ item.age }}</li>
        </ul>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          // 所有列表数据
          list: [
            { name: '张三', age: 18 },
            { name: '李四', age: 22 },
            { name: '王五', age: 25 },
            { name: '赵六', age: 20 }
          ],
          // 搜索关键字
          searchTxt: ''
        }
      },
      computed: {
        // 手动筛选出包含关键字的记录
        searchList() {
          return this.list.filter(item => {
            return item.name.indexOf(this.searchTxt) > -1;
          });
        }
      }
    }
    </script>
  

通过这种方式，我们可以对列表数据进行手动筛选，方便用户进行查看。