Bagaimana untuk menjana tatasusunan json dalam vue

Vue.js ialah rangka kerja JavaScript untuk membina aplikasi web. Ia menyediakan banyak fungsi berguna, termasuk mencipta dan memanipulasi tatasusunan JSON. Dalam artikel ini, kami akan memperkenalkan cara menjana tatasusunan JSON menggunakan Vue.js.

Jana tatasusunan JSON kosong

Mula-mula, kita perlu menjana tatasusunan JSON kosong, yang boleh dicapai dengan mentakrifkan tatasusunan kosong dalam contoh Vue. Berikut ialah contoh mudah:

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

Dalam contoh ini, kami mentakrifkan tatasusunan kosong bernama "item" yang akan digunakan untuk menyimpan data JSON. Sekarang kita boleh mula menambah data pada tatasusunan.

Tambah data JSON pada tatasusunan

Untuk menambah data JSON pada tatasusunan dalam contoh Vue, kami boleh menggunakan kaedah terbina dalam Vue seperti push() dan splice(). Berikut ialah contoh menambah data pada tatasusunan menggunakan kaedah 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' });
    }
  }
})

Dalam contoh ini, kami telah menentukan kaedah yang dipanggil "addItem" yang akan menggunakan kaedah push() untuk menambah data pada tatasusunan. Objek JSON ditambahkan pada tatasusunan "item" pada contoh Vue. Kita boleh menggunakan arahan v-on dalam HTML untuk mengikat kaedah ini pada butang atau elemen interaktif lain.

Gunakan v-for untuk menggelung melalui tatasusunan JSON

Vue menyediakan arahan yang dipanggil v-for, yang boleh digunakan untuk menggelung melalui tatasusunan, objek dan koleksi. Kita boleh menggunakan arahan v-for untuk menjadikan setiap objek tatasusunan JSON sebagai elemen HTML. Berikut ialah contoh mudah:

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

Dalam contoh ini, kami menggunakan arahan v-for untuk melelaran melalui tatasusunan "item" dalam contoh Vue, menjadikan setiap objek sebagai item senarai HTML. Dalam item senarai, kita boleh menggunakan sintaks Misai untuk menjadikan sifat objek tatasusunan sebagai rentetan.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menjana tatasusunan JSON menggunakan Vue.js. Kami belajar cara membuat tatasusunan JSON kosong, menambah data padanya dan menggunakan arahan v-for untuk melelarkan tatasusunan dan menjadikannya elemen HTML. Melalui fungsi Vue.js ini, kami boleh menjana dan memanipulasi data JSON dengan mudah dan menggunakannya untuk membina aplikasi web dinamik.

Atas ialah kandungan terperinci Bagaimana untuk menjana tatasusunan json dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!