Comment générer un tableau json dans vue

Vue.js est un framework JavaScript pour créer des applications Web. Il fournit de nombreuses fonctionnalités utiles, notamment la création et la manipulation de tableaux JSON. Dans cet article, nous présenterons comment générer un tableau JSON à l'aide de Vue.js.

Générer un tableau JSON vide

Tout d'abord, nous devons générer un tableau JSON vide, ce qui peut être réalisé en définissant un tableau vide dans l'instance Vue. Voici un exemple simple :

new Vue({
  data: {
    items: []
  }
})

Dans cet exemple, nous définissons un tableau vide nommé "items" qui sera utilisé pour stocker les données JSON. Nous pouvons maintenant commencer à ajouter des données au tableau.

Ajouter des données JSON à un tableau

Pour ajouter des données JSON à un tableau dans une instance Vue, nous pouvons utiliser les méthodes intégrées de Vue telles que push() et splice(). Voici un exemple d'ajout de données à un tableau à l'aide de la méthode push() :

new Vue({
  data: {
    items: [
      { name: 'vue', version: '2.6.11' },
      { name: 'react', version: '16.13.1' },
      { name: 'angular', version: '9.0.0' }
    ]
  },
  methods: {
    addItem: function() {
      this.items.push({ name: 'jquery', version: '3.5.1' });
    }
  }
})

Dans cet exemple, nous avons défini une méthode appelée "addItem" qui ajoutera un objet JSON à une instance Vue en utilisant la méthode push() dans le tableau "éléments". Nous pouvons utiliser la directive v-on en HTML pour lier cette méthode à un bouton ou à un autre élément interactif.

Utilisez v-for pour parcourir les tableaux JSON

Vue fournit une instruction appelée v-for, qui peut être utilisée pour parcourir des tableaux, des objets et des collections. Nous pouvons utiliser la directive v-for pour restituer chaque objet du tableau JSON en tant qu'élément HTML. Voici un exemple simple :

<ul>
  <li v-for="item in items">
    {{ item.name }} - {{ item.version }}
  </li>
</ul>

Dans cet exemple, nous utilisons la directive v-for pour parcourir le tableau "items" dans l'instance Vue, rendant chaque objet comme un élément de liste HTML. Dans les éléments de liste, nous pouvons utiliser la syntaxe Moustache pour restituer les propriétés de l'objet tableau sous forme de chaînes.

Résumé

Dans cet article, nous avons présenté comment générer un tableau JSON à l'aide de Vue.js. Nous avons appris à créer un tableau JSON vide, à y ajouter des données et à utiliser la directive v-for pour parcourir le tableau et le restituer en éléments HTML. Grâce à ces fonctions Vue.js, nous pouvons facilement générer et manipuler des données JSON et les utiliser pour créer des applications Web dynamiques.

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!