Ubah suai nilai data dalam vue

Vue.js ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk mencipta antara muka yang dinamik dan interaktif. Pada teras Vue.js ialah mekanisme pengikatan data reaktif, yang secara automatik memastikan paparan selari dengan data. Dalam Vue.js, kami boleh mengubah suai data komponen dengan cara yang mudah dan intuitif, yang dipanggil "data responsif".

Dalam Vue.js, kita boleh menggunakan pilihan "data" untuk menentukan data komponen. Pilihan "data" ialah fungsi yang mengembalikan objek yang mengandungi data komponen. Contohnya:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

Dalam contoh di atas, kami menentukan komponen "komponen saya" dan menentukan data bernama "mesej" kepadanya. Nilai awalnya ialah "Hello Vue.js".

Sekarang, mari kita lihat cara mengubah suai data komponen. Kita boleh menggunakan "this.$data" untuk mengakses objek data komponen, dan kemudian mengubah suai secara langsung nilai atributnya, sebagai contoh:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    changeMessage: function () {
      this.$data.message = 'Welcome to Vue.js!'
    }
  }
})

Dalam contoh di atas, kami mentakrifkan kaedah yang dipanggil "changeMessage", iaitu terikat kepada peristiwa klik komponen. Apabila komponen diklik, ia memanggil kaedah "changeMessage" untuk mengubah suai nilai sifat "message". Harap maklum bahawa kami menggunakan "this.$data.message" untuk mendapatkan nilai sifat "message" dan menggunakan pernyataan tugasan untuk mengubah suainya kepada nilai baharu.

Selain itu, dalam Vue.js, kita juga boleh menggunakan kaedah "Vue.set" untuk mengubah suai nilai data. Kaedah ini boleh digunakan untuk mengubah suai nilai tatasusunan dan objek. Contohnya:

Vue.component('my-component', {
  data: function () {
    return {
      data: {
        name: 'John',
        age: 30
      }
    }
  },
  methods: {
    changeData: function () {
      Vue.set(this.$data.data, 'age', 31)
    }
  }
})

Dalam contoh di atas, kami mentakrifkan objek bernama "data" dan mentakrifkan dua sifat untuknya: sifat rentetan bernama "nama" dan sifat rentetan bernama "data". umur". Apabila kita mengklik pada komponen, ia memanggil kaedah "changeData" untuk mengubah suai nilai harta "umur". Kami menggunakan kaedah "Vue.set" untuk mengubah suai nilai atribut "umur" kepada 31.

Ringkasan

Dalam Vue.js, mengubah suai nilai data adalah sangat mudah dan intuitif. Kita boleh menggunakan "this.$data" untuk mengakses objek data dan secara langsung mengubah suai nilai sifatnya. Selain itu, kami juga boleh menggunakan kaedah "Vue.set" untuk mengubah suai nilai tatasusunan dan objek. Kaedah ini menjadikannya sangat mudah untuk kami melaksanakan kemas kini data dinamik komponen.

Atas ialah kandungan terperinci Ubah suai nilai data dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!