How to generate a json array in vue

Vue.js is a JavaScript framework for building web applications. It provides a lot of useful functionality, including creating and manipulating JSON arrays. In this article, we will introduce how to generate a JSON array using Vue.js.

Generate an empty JSON array

First, we need to generate an empty JSON array, which can be achieved by defining an empty array in the Vue instance. Here is a simple example:

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

In this example, we define an empty array named "items", which will be used to store JSON data. Now we can start adding data to the array.

Add JSON data to an array

To add JSON data to an array in a Vue instance, we can use Vue's built-in methods, such as push() and splice(). The following is an example of adding data to an array using the push() method:

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' });
    }
  }
})

In this example, we define a method named "addItem" which will use the push() method to add data to the JSON object. Added to the "items" array of the Vue instance. We can use the v-on directive in HTML to bind this method to a button or other interactive element.

Use v-for to loop through JSON arrays

Vue provides an instruction called v-for, which can be used to loop through arrays, objects, and collections. We can use the v-for directive to render each object of the JSON array as an HTML element. Here is a simple example:

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

In this example, we use the v-for directive to iterate through the "items" array in the Vue instance and render each object as an HTML list item. In list items, we can use Mustache syntax to render the properties of the array object as strings.

Summary

In this article, we introduced how to generate a JSON array using Vue.js. We learned how to create an empty JSON array, add data to it, and use the v-for directive to iterate over the array and render it into HTML elements. Through these Vue.js functions, we can easily generate and manipulate JSON data and use it to build dynamic web applications.

The above is the detailed content of How to generate a json array in vue. For more information, please follow other related articles on the PHP Chinese website!