How to filter and search data in Vue technology development

How to filter and search data in Vue technology development

In Vue technology development, data filtering and search are very common requirements. Through reasonable data filtering and search functions, users can quickly and easily find the information they need. This article will introduce how to use Vue to implement data filtering and search functions, and give specific code examples.

1. Data filtering:

Data filtering refers to filtering data according to specific conditions to filter out data that meets the conditions. In Vue, you can use the computed attribute and the v-for directive to implement data filtering.

In HTML templates, you can use the v-for directive to traverse the data list and use the computed attribute to define a filter to filter the data based on specific conditions. The specific code is as follows:

<div id="app">
  <input type="text" v-model="keyword" placeholder="请输入关键字">
  <ul>
    <li v-for="item in filteredItems">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      items: ["苹果", "香蕉", "橙子", "西瓜"],
      keyword: ""
    },
    computed: {
      filteredItems() {
        return this.items.filter(item => item.includes(this.keyword));
      }
    }
  });
</script>

In the above code, use the v-model instruction to bidirectionally bind the value in the input box to the keyword attribute in the Vue instance. In the computed attribute filteredItems, use Array's filter method to filter out qualified data based on keywords, and render it in a loop in the template.

2. Data search:

Data search refers to searching for matching results in the data based on the keywords entered by the user. In Vue, you can implement the data search function by monitoring the value changes of the input box and using the computed attribute.

In the HTML template, you can use the v-model directive to bidirectionally bind the value of the input box to the keyword attribute in the Vue instance, and use the watch attribute to monitor changes in the keyword attribute. The specific code is as follows:

<div id="app">
  <input type="text" v-model="keyword" placeholder="请输入关键字">
  <ul>
    <li v-for="item in searchResults">{{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      items: ["苹果", "香蕉", "橙子", "西瓜"],
      keyword: "",
      searchResults: []
    },
    watch: {
      keyword(newKeyword) {
        this.searchResults = this.items.filter(item => item.includes(newKeyword));
      }
    }
  });
</script>

In the above code, the keyword attribute and searchResults attribute are used to save the keywords and search results entered by the user respectively. Monitor changes in the keyword attribute through the watch attribute, search the data based on the new keywords in the callback function, save the search results in the searchResults attribute, and render them in a loop in the template.

Through the above example code, we can see that the implementation of data filtering and search functions in Vue is very simple and flexible. By rationally using computed attributes and watch attributes, we can quickly implement various data filtering and search needs, improving user experience and efficiency. I hope this article can help you with data filtering and searching in Vue development!

The above is the detailed content of How to filter and search data in Vue technology development. For more information, please follow other related articles on the PHP Chinese website!