Vue数组过滤详解

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

五、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>
  

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