Nilai mengikat kotak baca sahaja Vue

Dalam pembangunan Vue, kami biasanya perlu memaparkan data dalam templat supaya halaman itu boleh dipaparkan. Kadang-kadang untuk menghalang pengguna daripada mengubah suai data sesuka hati, kita perlu menetapkan kotak input atau kotak teks tertentu kepada status baca sahaja Dalam kes ini, kita perlu mengikat nilai kotak baca sahaja. Artikel ini akan memperkenalkan cara untuk mengikat nilai kotak baca sahaja dalam pembangunan Vue.

1 Apakah itu kotak baca sahaja

Kotak baca sahaja merujuk kepada jenis kotak input borang di mana pengguna hanya boleh melihat kandungan dalam kotak dan tidak boleh mengubah suai kandungan dalam kotak Secara umumnya, Said digunakan untuk menyampaikan data atau maklumat.

2. Masalah menggunakan v-model

Dalam vue, kita boleh menggunakan v-model untuk mengikat borang yang pengguna boleh ubah suai. Walau bagaimanapun, untuk kotak baca sahaja, kami tidak boleh menggunakan model v. Ini kerana model v pada asasnya melakukan pengikatan dua hala pada pembolehubah Apabila pengguna menukar nilai kotak input, nilai pembolehubah juga akan berubah dengan sewajarnya. Untuk kotak baca sahaja, kami berharap pengguna hanya boleh melihat nilai pembolehubah dan tidak mengubah suainya sesuka hati, jadi model v tidak sesuai untuk kotak baca sahaja.

3. Gunakan v-bind untuk mengikat nilai

Memandangkan v-model tidak boleh digunakan, kita perlu mencari penyelesaian lain untuk mengikat nilai kotak baca sahaja. Pada masa ini, kita perlu menggunakan arahan v-bind untuk mengikat.

Dalam Vue, v-bind boleh mengikat mana-mana atribut HTML, termasuk nilai Ciri ini boleh digunakan untuk mengikat nilai kotak baca sahaja.

Kita boleh menggunakan v-bind:value pada label kotak baca sahaja untuk mengikat nilai kotak baca sahaja:

<input type="text" :value="readOnlyValue" readonly />

Arahan v-bind digunakan di sini, dan atribut nilai ialah Tetapkan nilai readOnlyValue untuk dipaparkan dalam kotak baca sahaja, dan akhirnya tambah atribut baca sahaja untuk memastikan kotak baca sahaja tidak boleh diubah. Kemudian hanya tentukan readOnlyValue dalam data Vue dan anda boleh mengikat nilai dengan mudah pada kotak baca sahaja.

data() {
  return {
    readOnlyValue: '只读框的值'
  };
},

4. Mengikat nilai atribut yang dikira

Dalam sesetengah kes, kita perlu melakukan beberapa pemprosesan pada data, dan kemudian mengikat nilai yang diproses pada kotak baca sahaja. Pada masa ini, kita boleh menggunakan sifat yang dikira untuk menjana nilai yang mengikat.

Mula-mula, tentukan sumber data yang hendak ditukar dalam data Vue, seperti nilai sebelum penukaran:

let valueToTrans = '123';

Seterusnya, tentukan atribut terkira yang mana nilai ditukar , sebagai contoh:

computed: {
  transValue() {
    return valueToTrans + 'px';
  },
},

Akhir sekali, gunakan v-bind:value pada label kotak baca sahaja untuk mengikat transValue harta yang dikira ke kotak baca sahaja:

<input type="text" :value="transValue" readonly />

Dengan cara ini, kita boleh gunakan pengiraan Hartanah menukar data dan mengikatnya ke kotak baca sahaja.

Ringkasan

Menggunakan v-model ialah kaedah pengikatan biasa dalam pembangunan Vue, tetapi untuk kotak input yang tidak boleh diedit seperti kotak baca sahaja, kita perlu menggunakan kaedah lain untuk mengikat. Artikel ini memperkenalkan penyelesaian dalam pembangunan Vue: menggunakan arahan v-bind untuk mengikat nilai kotak baca sahaja. Pada masa yang sama, ia juga memperkenalkan cara menggunakan sifat terkira untuk memproses data dan kemudian mengikatnya pada kotak baca sahaja. Kedua-dua kaedah ini boleh menyelesaikan masalah mengikat kotak baca sahaja dalam pembangunan Vue dengan berkesan.

Atas ialah kandungan terperinci Nilai mengikat kotak baca sahaja Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!