Vue menentukan sama ada borang telah berubah

Vue ialah salah satu rangka kerja bahagian hadapan yang sangat popular untuk membina aplikasi web interaktif. Dalam Vue, borang ialah salah satu ciri teras. Borang ialah elemen HTML yang digunakan untuk mengumpul data daripada pengguna. Ia boleh mengandungi pelbagai jenis elemen borang, seperti kotak input teks, senarai juntai bawah, butang radio, kotak semak dan banyak lagi. Walau bagaimanapun, fungsi yang sangat praktikal dalam Vue adalah untuk menentukan sama ada borang telah berubah, yang biasanya boleh digunakan untuk melakukan beberapa operasi, seperti menggesa pengguna untuk menyimpan perubahan yang belum disimpan, melumpuhkan atau mendayakan butang simpan, dsb. Dalam artikel ini, kami akan meneroka cara menggunakan Vue untuk menentukan sama ada borang telah berubah.

1. Gunakan v-model untuk mengikat data borang

Dalam Vue, gunakan arahan model-v untuk mengikat data borang ke objek data tika Vue. Sebagai contoh, dalam kotak input teks, anda boleh menggunakan arahan model-v untuk mengikat nilai yang dimasukkan ke objek data bagi contoh Vue. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  }
}
</script>

Kod di atas akan mencipta kotak input teks Apabila nilai kotak input berubah, atribut data nama bagi contoh Vue akan berubah dengan sewajarnya.

2. Gunakan sifat yang dikira untuk menentukan sama ada borang telah berubah

Atribut data dalam tika Vue boleh digunakan untuk menyimpan nilai semasa borang. Tetapi bagaimana untuk mengetahui sama ada borang telah berubah? Anda boleh menggunakan sifat pengiraan Vue untuk menyelesaikan masalah ini. Sifat yang dikira ialah jenis sifat khas dalam Vue yang nilainya dikira daripada sifat data lain. Contohnya, dalam contoh di atas, anda boleh mencipta sifat terkira untuk menentukan keadaan borang yang diubah, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
  }
}
</script>

Dalam kod di atas, kami mencipta sifat terkira isDirty, yang digunakan untuk tentukan sama ada bentuk telah berubah. Nilai harta yang dikira dikira dengan membandingkan nilai bentuk semasa dengan nilai bentuk asal. Untuk menyimpan nilai bentuk asal, kami juga mencipta atribut data originalName dan menetapkan nilainya kepada nilai awal nama apabila dipasang. Apabila nilai borang berubah, nilai sifat pengiraan isDirty berubah.

3 Gunakan jam tangan untuk memantau perubahan dalam nilai bentuk

Selain atribut yang dikira, Vue juga menyediakan satu lagi atribut khas, jam tangan, untuk memantau perubahan dalam atribut data. Atribut jam tangan boleh memantau perubahan dalam satu atau lebih atribut data dan melaksanakan operasi khusus apabila data berubah. Dalam borang, kita boleh menggunakan atribut jam tangan untuk memantau perubahan dalam nilai borang, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
    this.$watch('name', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log('表单值改变')
        this.$emit('change') // 触发自定义事件change
      }
    })
  }
}
</script>

Dalam kod di atas, kami mencipta atribut jam tangan untuk memantau perubahan dalam atribut nama dan melaksanakan tindakan yang sepadan apabila operasi nilai berubah. Dalam contoh ini, selagi nilai atribut nama berubah, perubahan peristiwa tersuai akan dicetuskan Peristiwa ini boleh dipantau dan diproses dalam komponen induk.

4 Gunakan perintah v-sekali untuk menyimpan nilai awal borang

Terdapat cara lain untuk menyimpan nilai awal borang, dan itu ialah menggunakan v-sekali perintah. v-sekali ialah arahan dalam Vue Fungsinya adalah untuk mengikat elemen sekali apabila ia pertama kali terikat, dan kemudian elemen itu tidak akan dikemas kini. Gunakan arahan v-sekali untuk menyimpan nilai awal borang dalam atribut nilai kotak input teks. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <input type="text" v-model="name" v-once:value="originalName">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.$el.querySelector('input').value
    },
    originalName() {
      return this.name // 返回表单的初始值
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-sekali untuk mengikat atribut nilai elemen input dan menyimpan nilai awal dalam atribut nilai elemen bentuk. Menggunakan nama asal harta terkira, nilai awal boleh dikembalikan kepada harta terkira isDirty untuk pengiraan bagi menentukan sama ada borang telah berubah.

Ringkasan

Dalam Vue, menentukan sama ada borang telah berubah ialah fungsi yang sangat praktikal untuk menggesa pengguna menyimpan pengubahsuaian yang belum disimpan, melumpuhkan atau mendayakan butang simpan, dsb. Vue menyediakan banyak cara untuk mencapai fungsi ini, seperti menggunakan sifat data, sifat yang dikira, sifat jam tangan dan arahan v-sekali. Memilih kaedah yang sesuai bergantung pada keperluan sebenar dan senario tertentu. Tetapi tidak kira kaedah yang digunakan, anda perlu ingat untuk menyimpan nilai awal borang dan mengemas kini status dalam masa untuk menentukan sama ada borang telah berubah.

Atas ialah kandungan terperinci Vue menentukan sama ada borang telah berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!