Bagaimana untuk mengakses data dalam data vue

Vue ialah rangka kerja progresif untuk membina antara muka pengguna yang fleksibel dan boleh dikembangkan, menjadikannya mudah untuk membina aplikasi satu halaman. Walau bagaimanapun, Vue juga boleh mempunyai keluk pembelajaran tertentu, terutamanya bagi mereka yang masih pemula, cara mengakses pembolehubah data Vue boleh menjadi masalah yang sukar. Dalam artikel ini, kami akan meneroka cara mengakses sifat data bagi tika Vue.

Instance Vue ialah teras Vue, yang menyimpan data komponen, kaedah, dsb. Antaranya, data adalah salah satu atribut yang paling biasa digunakan, yang mengandungi data yang perlu diikat dalam aplikasi. Mari kita lihat cara untuk mengakses atribut data bagi contoh Vue.

Pertama, kita perlu mencipta tika Vue. Kod berikut menunjukkan cara untuk mencipta tika Vue dan mengikat data pada sifat data:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Dalam kod di atas, kami mencipta tika Vue dan menyimpannya dalam pembolehubah " aplikasi". Kami juga mengikat pembolehubah yang dipanggil mesej kepada sifat data kejadian ini.

Mengakses atribut data tika Vue adalah sangat mudah, kita hanya perlu menggunakan atribut "$data" tika Vue untuk mengaksesnya. Kod berikut menunjukkan cara untuk mengakses atribut data bagi contoh Vue:

console.log(app.$data.message);

Dalam kod di atas, kami menggunakan kaedah console.log() untuk mencetak nilai mesej pembolehubah dalam atribut data daripada contoh Vue.

Selain menggunakan atribut "$data", kami juga boleh terus menggunakan nama pembolehubah bagi contoh Vue untuk mengakses atribut data. Kod berikut menunjukkan cara untuk mengakses atribut data secara terus melalui nama pembolehubah bagi contoh Vue:

console.log(app.message);

Dalam kod di atas, kami terus menggunakan nama pembolehubah "aplikasi" bagi tika Vue, dan kemudian tambah atribut data Nama pembolehubah "mesej" digunakan untuk mengakses pembolehubah dalam atribut data.

Selain itu, kami juga boleh menggunakan kata kunci "ini" dalam tika Vue untuk mengakses atribut data tika Vue. Kod berikut menunjukkan cara menggunakan "ini" untuk mengakses atribut data tika Vue:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function () {
    console.log(this.message)
  }
})

Dalam kod di atas, kami menggunakan kata kunci "ini" dalam tika Vue dan kemudian menambah data Property's nama ubah "mesej" untuk mengakses data dalam keadaan ini.

Untuk meringkaskan, untuk mengakses atribut data tika Vue, kita boleh menggunakan atribut "$data" tika Vue untuk mengaksesnya, atau kita boleh terus menggunakan nama pembolehubah bagi tika Vue dan nama pembolehubah atribut data untuk mengaksesnya Pada masa yang sama, kita boleh Gunakan kata kunci "ini" untuk mengaksesnya dalam contoh Vue. Kaedah ini boleh berjaya mengakses atribut data bagi contoh Vue.

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