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>
  

通過這種方式，我們可以對列表數據進行手動篩選，方便用戶進行查看。