Alih keluar ruang rentetan dalam vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri berguna dalam pembangunan, membolehkan pembangun membuat aplikasi web yang boleh diselenggara dan berskala dengan mudah. Dalam Vue, anda boleh menggunakan arahan khusus untuk mengalih keluar ruang daripada rentetan.

Arahan Vue ialah atribut HTML awalan v yang digunakan dalam templat Ia digunakan untuk mengikat ungkapan pada atribut elemen DOM. Jika anda mahu rentetan mempunyai semua ruang putih dialih keluar, anda boleh menggunakan arahan v-model untuk mengalih keluarnya.

Dalam Vue, model v mewakili pengikatan data dua hala. Ini bermakna apabila anda menukar nilai medan input borang, data tika Vue yang sepadan turut berubah, dan begitu juga sebaliknya. Apabila menggunakan arahan model-v, ia mesti ditetapkan pada medan input borang.

Sebagai contoh, coretan HTML berikut akan mengikat input pengguna pada sifat mesej dalam tika Vue.

<div>
  <input type="text" v-model="message">
  {{ message }}
</div>

Jika anda ingin mengalih keluar ruang daripada rentetan sebelum input pengguna, anda boleh menggunakan pengubah suai .trim sebelum arahan v-model. Sebagai contoh, di bawah ialah templat yang mengalih keluar semua ruang daripada rentetan input.

<div>
  <input type="text" v-model.trim="message">
  {{ message }}
</div>

Dalam templat di atas, arahan v-model.trim menggunakan pengubah suai trim, yang akan mengalih keluar ruang daripada rentetan yang dimasukkan oleh pengguna dalam kotak input dan menyimpan hasilnya dalam pembolehubah mesej. Ini bermakna apabila pengguna memasukkan rentetan, Vue akan mengalih keluar semua ruang dalam rentetan dan menyimpannya sebagai pembolehubah mesej.

Perlu diperhatikan bahawa arahan model v menggunakan pengubah suai .trim hanya boleh mengalih keluar ruang permulaan dan penamat dalam rentetan, tetapi bukan ruang tengah. Jika anda perlu mengalih keluar semua ruang, anda boleh menggabungkannya dengan kaedah replace() dalam JavaScript.

Sebagai contoh, kaedah Vue berikut boleh mengalih keluar semua ruang dalam rentetan:

methods: {
  removeSpaces(str) {
    return str.replace(/\s+/g, '');
  }
}

Dalam kaedah removeSpaces() di atas, ungkapan biasa digunakan untuk memadankan rentetan semua ruang. Ungkapan biasa /s+/g di sini boleh sepadan dengan satu atau lebih ruang.

Akhir sekali, kita boleh menggunakan kaedah di atas dalam kotak teks untuk mengalih keluar ruang daripada rentetan.

<div>
  <input type="text" v-model="message" @input="message = removeSpaces($event.target.value)">
  {{ message }}
</div>

Dalam templat di atas, @input mendengar peristiwa input kotak teks dan memanggil kaedah removeSpaces() untuk mengalih keluar ruang dalam rentetan. Dengan cara ini, semua ruang dalam rentetan dialih keluar.

Ringkasnya, Vue menyediakan pelbagai kaedah untuk mengalih keluar ruang daripada rentetan. Anda boleh menggunakan pengubah suai .trim untuk mengalih keluar ruang hadapan dan belakang, atau anda boleh menggunakan kaedah replace() dalam JavaScript untuk mengalih keluar semua ruang. Tidak kira kaedah yang anda pilih, menggunakan Vue menjadikannya lebih mudah.

Atas ialah kandungan terperinci Alih keluar ruang rentetan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!