VUE3開發入門：使用Vue.js動態過濾資料列表

Vue.js已經成為現代Web開發的中流砥柱。它是一個輕量級的JavaScript框架，提供了資料綁定和組件化的能力，使得開發者能夠更輕鬆地建立互動型應用程式。而現在，Vue.js的新版VUE3也已經問世。在本文中，我們將使用VUE3，透過實例，介紹如何在Vue.js中實作動態過濾資料清單。

1.準備工作

在開始本教學之前，您需要先安裝Node.js和Vue的CLI工具。可以透過以下指令來檢查版本:

 node -v
 npm -v

如果你目前使用的是較低版本的Node.js，可以在Node.js官網下載最新版本。安裝完成後，您可以在命令列中使用以下命令進行Vue CLI的安裝:

npm install -g @vue/cli

2.建立Vue.js項目

在命令列中，進入您要建立的項目所在目錄，並執行以下命令:

vue create vue-demo
cd vue-demo

執行上述命令後，會出現互動式命令列介面，讓您可以自訂專案配置。您可以選擇手動配置，也可以使用預設配置。請根據您自己的需求進行選擇。

3.建立資料列表元件

預設情況下，Vue CLI會產生一個Hello World的應用程式。我們需要建立一個新元件來展示資料列表。在src/components目錄下建立一個新元件檔案List.vue，然後在元件中加入以下程式碼：

<template>
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "grape"],
      search: ""
    };
  },

  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
};
</script>

上述程式碼中，我們在元件中定義了一個陣列list用於儲存要展示的數據。您可以替換它為您自己的資料來源。然後，我們使用v-model來綁定輸入框的資料到元件中的屬性search。在computed屬性中，我們定義了一個計算屬性filteredList，它會根據search屬性來過濾list數組中的資料。

4.使用元件

在App.vue檔案中，匯入元件List，在template中加入以下HTML：

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  components: {
    List
  }
};
</script>

上述程式碼中，我們首先匯入了List組件，然後在組件選項中聲明組件。在template中，我們將List元件加入了頁面中。不出意外，您現在應該可以在瀏覽器中看到您的應用程序，並且輸入框可以即時響應數據列表的過濾操作。

總結

在這篇文章中，我們教學如何使用Vue.js和VUE3建立動態資料清單。透過這個例子，您學習如何使用Vue的雙向資料綁定功能和計算屬性來過濾資料。雖然這個範例比較簡單，但它是您掌握Vue.js的良好起點。在您的下一個專案中，您可以利用這個範本來建立更複雜的應用程式。

以上是VUE3開發入門：使用Vue.js動態過濾資料列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！