hujung hadapan web
View.js
Cara menggunakan v-model.trim untuk mengalih keluar ruang daripada data kotak input dalam Vue
Cara menggunakan v-model.trim untuk mengalih keluar ruang daripada data kotak input dalam Vue
Vue ialah rangka kerja JavaScript yang popular untuk membina halaman web responsif. v-model ialah salah satu arahan yang paling biasa digunakan dalam Vue, digunakan untuk pengikatan dua hala data dan kawalan borang. Dan v-model.trim ialah penggunaan khas model v, yang digunakan untuk mengalih keluar ruang hadapan dan belakang dalam data dalam kotak input.
Dalam Vue, kita boleh menggunakan arahan v-model.trim untuk melaksanakan fungsi penyingkiran ruang bagi kawalan borang. Sebagai contoh, kita boleh mengikat arahan v-model.trim ke kotak teks seperti berikut:
<template>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" v-model.trim="username">
<p>去空格后的用户名：{{ trimmedUsername }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
}
},
computed: {
trimmedUsername() {
return this.username.trim()
},
},
}
</script>Dalam kod di atas, kami mengikat nilai kotak teks pada data bernama atribut "nama pengguna", dan gunakan arahan v-model.trim untuk melaksanakan fungsi penyingkiran ruang. Selain itu, kami juga mentakrifkan atribut yang dikira "trimmedUsername" untuk memaparkan nama pengguna selepas mengalih keluar ruang.
Perlu diambil perhatian bahawa arahan v-model.trim hanya boleh digunakan untuk kawalan input teks, seperti dan