Getting Started with VUE3 Development: Using Vue.js to Dynamically Filter Data Lists

Vue.js has become the mainstay of modern web development. It is a lightweight JavaScript framework that provides data binding and componentization capabilities, making it easier for developers to build interactive applications. And now, the new version of Vue.js, VUE3, has also been released. In this article, we will use VUE3 to introduce through examples how to implement dynamic filtering of data lists in Vue.js.

1. Preparation

Before starting this tutorial, you need to install the CLI tools for Node.js and Vue. You can check the version through the following command:

 node -v
 npm -v

If you are currently using a lower version of Node.js, you can download the latest version from the Node.js official website. After the installation is complete, you can use the following command in the command line to install Vue CLI:

npm install -g @vue/cli

2. Create a Vue.js project

In the command line, enter the project you want to create directory, and execute the following command:

vue create vue-demo
cd vue-demo

After executing the above command, an interactive command line interface will appear, allowing you to customize the project configuration. You can choose to configure manually or use the default configuration. Please choose according to your own needs.

3. Build the data list component

By default, Vue CLI will generate a Hello World application. We need to build a new component to display the data list. Create a new component file List.vue in the src/components directory, and then add the following code in the component:

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

In the above code, we define an array list in the component to store the data to be displayed. . You can replace it with your own data source. Then, we use v-model to bind the data of the input box to the search attribute in the component. In the computed attribute, we define a calculated attribute filteredList, which will filter the data in the list array based on the search attribute.

4. Use components

In the App.vue file, import the component List and add the following HTML to the template:

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

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

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

In the above code, we first imported the List Component and then declare the component in the component options. In the template, we added the List component to the page. As expected, you should now see your application in the browser and the input boxes responding to filtering of the data list in real time.

Summary

In this article, we teach how to build a dynamic data list using Vue.js and VUE3. Through this example, you learned how to use Vue's two-way data binding functionality and computed properties to filter data. Although this example is relatively simple, it is a good starting point for you to master Vue.js. In your next project, you can leverage this template to build more complex applications.

The above is the detailed content of Getting Started with VUE3 Development: Using Vue.js to Dynamically Filter Data Lists. For more information, please follow other related articles on the PHP Chinese website!