Exemples d'application de la fonction de visualisation de données dans les documents Vue

Vue.js est un framework JavaScript populaire pour créer des interfaces utilisateur Web interactives. Il fournit un système de liaison de données flexible et un moyen simple de composer et de réutiliser des composants.

Dans la documentation Vue.js, l'utilisation de la visualisation de données en JavaScript est appelée propriétés calculées. Dans cet article, nous présenterons certaines propriétés calculées dans Vue.js et montrerons comment vous pouvez les exploiter pour créer des applications du monde réel utilisant la visualisation de données.

Qu'est-ce qu'une propriété calculée ? Ils mettent automatiquement à jour les résultats en fonction des propriétés définies dans l'instance Vue.js. Cela signifie que lorsque la propriété dépendante change, la propriété calculée recalculera automatiquement sa valeur. La syntaxe d'une propriété calculée est la suivante :

computed: {
  // 计算属性的名称
  属性名: function() {
    // 计算属性的计算逻辑
    return 计算结果
  }
}

Dans la syntaxe ci-dessus, une propriété calculée est définie par

property name

, et sa valeur est une fonction qui renvoie le résultat du calcul. Par exemple, supposons que nous ayons l'instance Vue.js suivante :

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Dans cet exemple, nous définissons la propriété calculée

fullName

, qui renvoie La valeur est une combinaison de firstName et lastName. Utilisez des propriétés calculées pour implémenter le filtrage des données

En utilisant les propriétés calculées, nous pouvons plus facilement implémenter un filtrage des données en fonction de conditions spécifiques. Par exemple, supposons que nous ayons l'instance Vue.js suivante :

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: '任务 1', done: true },
      { text: '任务 2', done: false },
      { text: '任务 3', done: false }
    ],
    filter: 'all'
  },
  computed: {
    filteredTodos: function () {
      if (this.filter === 'all') {
        return this.todos
      } else if (this.filter === 'done') {
        return this.todos.filter(function (todo) {
          return todo.done
        })
      } else if (this.filter === 'undone') {
        return this.todos.filter(function (todo) {
          return !todo.done
        })
      }
    }
  }
})

Dans cet exemple, nous définissons une variable d'état nommée

filter

, qui peut prendre les trois éléments suivants : les valeurs : tout, terminé et défait. Nous définissons également un attribut calculé nommé filteredTodos, qui calcule et renvoie notre tableau de tâches filtré en fonction de différentes conditions de filtrage. Maintenant, il nous suffit de lier les boutons pointant vers différentes conditions de filtrage à l'attribut

filter

pour terminer le filtrage des tâches. Par exemple :

<button @click="filter = 'all'">全部</button>
<button @click="filter = 'done'">已完成</button>
<button @click="filter = 'undone'">未完成</button>
<ul>
  <li v-for="todo in filteredTodos">
    {{ todo.text }}
  </li>
</ul>

Dans cet exemple, nous utilisons la directive

v-for

pour restituer chaque tâche de filteredTodos en HTML. Lorsque nous cliquons sur un bouton de condition de filtre, filter recevra la condition de filtre correspondante, et l'attribut calculé recalculera et mettra à jour la liste des tâches. Utilisez des propriétés calculées pour implémenter le tri et le filtrage

En plus du filtrage, nous pouvons également utiliser des propriétés calculées pour trier les données en fonction des besoins réels. Par exemple, disons que nous avons l'instance Vue.js suivante :

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'A', price: 6.5 },
      { name: 'B', price: 2 },
      { name: 'C', price: 5 },
      { name: 'D', price: 4.2 },
      { name: 'E', price: 8 },
    ],
    sortKey: 'name',
    sortReverse: false,
    filterKey: ''
  },
  computed: {
    sortedItems: function () {
      var key = this.sortKey
      var reverse = this.sortReverse ? -1 : 1

      var items = this.items.slice().sort(function (a, b) {
        a = a[key]
        b = b[key]
        return reverse * ((a > b) - (b > a))
      })

      if (this.filterKey) {
        items = items.filter(function (item) {
          return (
            item.name.toLowerCase().indexOf(this.filterKey.toLowerCase()) !== -1 ||
            item.price.toString().indexOf(this.filterKey) !== -1
          )
        }.bind(this))
      }

      return items
    }
  }
})

Dans ce cas, nous définissons une variable d'état appelée

items

, une pour chaque élément Attributs nommés # 🎜🎜#nom et prix. En même temps, nous définissons également trois états : sortKey, sortReverse et filterKey. Nous définissons également une propriété calculée appelée sortedItems

, qui calcule et trie automatiquement le tableau d'éléments en fonction des conditions de tri et de filtrage. Nous pouvons basculer automatiquement entre le tri et l'ordre décroissant en cliquant sur l'en-tête du tableau, et filtrer le tableau en saisissant du texte.

<table>
  <thead>
    <tr>
      <th>
        <button @click="sortKey = 'name'; sortReverse = !sortReverse">
          商品名称
        </button>
      </th>
      <th>
        <button @click="sortKey = 'price'; sortReverse = !sortReverse">
          商品价格
        </button>
      </th>
    </tr>
    <tr>
      <th>
        <input v-model="filterKey" placeholder="商品名称或价格" />
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedItems">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</table>

Dans cet exemple, nous avons utilisé la directive v-model

pour implémenter un filtre saisi par l'utilisateur. Nous avons également utilisé deux boutons pour basculer les critères de tri.

Conclusion

En utilisant des propriétés calculées, nous pouvons facilement créer des applications Vue.js avec visualisation de données. Les propriétés calculées interagissent avec le système réactif de Vue.js, rendant ainsi nos filtres et trieurs de données plus flexibles et plus faciles à utiliser.

Lorsque nous construisons des applications avec visualisation de données, les propriétés calculées sont un excellent moyen de mettre en œuvre la manipulation des données et le rendu des vues. Les exemples ci-dessus démontrent certaines fonctionnalités de base et avancées des propriétés calculées pour vous aider à commencer à les utiliser dans vos applications Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!