Cara menggunakan atribut dalam data dalam vue

Vue ialah rangka kerja MVVM bahagian hadapan Ciri terasnya ialah pengikatan data dua hala, iaitu perubahan dalam lapisan paparan akan ditunjukkan secara automatik dalam lapisan data dan perubahan dalam lapisan data akan mengemas kini paparan secara automatik. lapisan. Dalam Vue, kami menggunakan atribut data untuk menyimpan data, yang boleh dirujuk oleh templat dan dipaparkan dalam lapisan paparan.

Jadi, bagaimanakah kita menggunakan atribut dalam atribut data Vue? Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut dalam atribut data dalam Vue.

Cara mentakrifkan atribut data dalam Vue

Pertama, kita perlu memahami cara untuk mentakrifkan atribut data dalam Vue. Dalam komponen Vue, kita perlu menambah atribut data pada sifat komponen dan menetapkannya kepada fungsi. Fungsi ini mengembalikan objek yang mengandungi data di mana kita boleh menentukan sifat yang perlu kita gunakan.

Berikut ialah contoh mudah yang mentakrifkan komponen Vue bernama "orang" dan mentakrifkan atribut bernama "nama" dalam atribut data:

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  name: "person",
  data() {
    return {
      name: "张三"
    };
  }
};
</script>

Dalam kod di atas, kami menentukan atribut menamakan "nama" dalam atribut data dan memulakannya kepada "Zhang San". Kita boleh memaparkan nilai ini menggunakan atribut "nama" dalam templat.

Kemudian, apabila menetapkan atribut data, kita boleh menggunakan objek yang mengandungi berbilang atribut. Contohnya:

data() {
    return {
      name: "张三",
      age: 18,
      gender: "male"
    };
  }

Dalam kod di atas, kami mentakrifkan tiga atribut dalam atribut data: nama, umur dan jantina dan memulakannya kepada nilai yang berbeza.

Merujuk atribut data dalam templat Vue

Dalam definisi komponen Vue, kita boleh merujuk atribut data dalam templat, contohnya:

<script>
export default {
  data() {
    return {
      name: &quot;张三&quot;,
      age: 18,
      gender: &quot;male&quot;
    };
  }
};
</script>

Dalam kod di atas , kami Templat merujuk nama, umur dan atribut jantina dalam atribut data masing-masing dan menggunakan "{{}}" untuk menggunakannya sebagai pembolehubah. Apabila data berubah, nilai pembolehubah ini dikemas kini dengan sewajarnya.

Tukar nilai atribut data

Dalam Vue, kami menggunakan Vue.set atau vm.$set untuk menambahkan atribut baharu secara dinamik pada atribut data:

Vue.set(vm, 'age', 19);

Dalam kod di atas, kaedah Vue.set menambah umur atribut baharu pada atribut data vm, dengan nilai awal 19. Begitu juga, kita juga boleh menggunakan vm.$set untuk melaksanakan operasi yang sama.

Selain itu, kami juga boleh menggunakan Vue.delete atau vm.$delete untuk memadamkan atribut dalam atribut data:

Vue.delete(vm, 'age');

Dalam kod di atas, kaedah Vue.delete memadamkan data atribut umur atribut vm dalam supaya ia tidak wujud.

Kesimpulan

Perkara di atas adalah mengenai cara menggunakan atribut dalam atribut data Vue. Menggunakan atribut data Vue membolehkan kami menyimpan dan mengurus data dengan lebih mudah dan cepat, dan proses memaparkan data juga sangat mudah.

Walau bagaimanapun, kita juga perlu ambil perhatian bahawa apabila menukar nilai atribut data dalam Vue, kita harus mengikut prinsip aliran data sehala dan menggunakan kaedah yang disediakan oleh Vue untuk operasi data, supaya kod boleh dikekalkan dengan lebih baik kebolehbacaan dan kestabilan.

Atas ialah kandungan terperinci Cara menggunakan atribut dalam data dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!