How to view vue list

Vue.js is a popular JavaScript framework that can be used to build web interfaces and single-page applications (SPA). It is very powerful and flexible. In Vue, lists are a very common form of data presentation. This article will introduce some common methods and techniques of Vue lists.

1. Use the v-for directive to create a list

Vue provides the v-for directive to loop through an array or object and create a list. When using v-for, you can use the item of the current iteration, the index of the item of the current iteration, or the key of the current iteration (if it is an object).

For example, suppose we have an array movies, which includes several movies. We can use v-for to loop through the array to create a li tag for each movie on the page:

<ul>
  <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
</ul>

In this example, we use the v-for directive to iterate over the movies array and create a li tag for each movie movie creates a li tag. We also specify a key attribute for each li tag, which helps Vue optimize performance when re-rendering the list.

2. Use computed properties to filter or sort the list

Sometimes we need to filter or sort a part of the data from the list, Vue provides computed properties to achieve this purpose. A computed property is a property that can dynamically calculate a return value. When the property it depends on changes, it will recalculate and return a new value.

For example, suppose we have a movies array containing all movies, and a filteredMovies array containing movies classified as "Action". We can use computed properties to filter out all movies classified as "Action":

data() {
  return {
    movies: [...],
    genre: 'Action',
  }
},
computed: {
  filteredMovies() {
    return this.movies.filter(movie => movie.genre === this.genre)
  }
}

In this example, we define a computed property called filteredMovies in the computed property. It uses the Array.filter() method to filter out movies whose genre is equal to the currently selected genre.

Similarly, we can use computed properties to sort lists. For example, we can sort movies in ascending or descending order based on their ratings:

data() {
  return {
    movies: [...],
    sortBy: 'rating',
    sortDirection: 'asc',
  }
},
computed: {
  sortedMovies() {
    return this.movies.sort((a, b) => {
      const sortOrder = this.sortDirection === 'asc' ? 1 : -1
      if (a[this.sortBy] < b[this.sortBy]) {
        return -1 * sortOrder
      }
      if (a[this.sortBy] > b[this.sortBy]) {
        return 1 * sortOrder
      }
      return 0
    })
  }
}

In this example, we define a sortedMovies computed property in the computed property. It uses the Array.sort() method to sort movies based on their rating attributes. Depending on the sortDirection property, the sort direction may be "asc" (ascending) or "desc" (descending).

3. Using lists with object properties

In some cases, our list may not just be an array, it may be a collection of nested objects. These objects may have different properties and property values.

Suppose we have an object movies that contains movies, where each movie has a title attribute and a genres array containing the movie's classification. We can use the v-for directive to traverse the object properties as follows:

<template>
  <div v-for="(movie, key) in movies" :key="key">
    <h2>{{ movie.title }}</h2>
    <ul>
      <li v-for="genre in movie.genres" :key="genre">{{ genre }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {
        1: {
          title: 'The Dark Knight',
          genres: ['Action', 'Crime', 'Drama'],
        },
        2: {
          title: 'Pulp Fiction',
          genres: ['Crime', 'Drama'],
        },
      },
    }
  },
}
</script>

In this example, we use the v-for directive to traverse the object properties. We use movie variables and key variables to represent the currently iterated object and the key of this object. We then use the v-for directive to iterate through each movie's category and create a li tag.

Summary

In this article, we introduced some common methods and techniques for Vue lists. We learned to use the v-for instruction to loop through an array or object and create a list. We also learned how to use computed properties to filter and sort lists. Finally, we saw how to work with lists containing object properties.

Vue is a very powerful and flexible framework. We hope this article will be helpful to you and enable you to better use Vue to create lists.

The above is the detailed content of How to view vue list. For more information, please follow other related articles on the PHP Chinese website!