Bagaimana untuk merealisasikan perbezaan antara kotak input nombor dan kotak input teks dalam Vue

Dalam Vue, kami selalunya perlu menggunakan kotak input untuk pengguna memasukkan data, tetapi kotak input yang berbeza mempunyai sekatan dan peraturan pengesahan yang berbeza Contohnya, kotak input nombor perlu dihadkan kepada nombor sahaja, tetapi kotak input teks tidak perlu dihadkan jenis input. Artikel ini akan memperkenalkan cara untuk merealisasikan perbezaan antara kotak input nombor dan kotak input teks dalam Vue.

1 Gunakan atribut jenis untuk membezakan jenis kotak input

Dalam Vue, anda boleh menggunakan atribut jenis untuk membezakan kotak input kepada jenis yang berbeza. bermaksud kotak input teks, taip ="nombor" menunjukkan kotak input nombor. Apabila menggunakan atribut jenis, anda juga boleh menetapkan nilai lain, seperti taip="kata laluan" untuk kotak kata laluan, taip="e-mel" untuk kotak input e-mel, taip="tel" untuk kotak input telefon, dsb.

<template>
  <div>
    <label>文本输入框：</label>
    <input type="text" v-model="textValue"></input>
    <br>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textValue: '',
      numberValue: 0
    }
  }
}
</script>

Dalam kod di atas, kami mencipta dua kotak input, satu ialah kotak input teks dan satu lagi ialah kotak input nombor. Dengan menetapkan atribut jenis secara berbeza, kita boleh membezakan dua jenis kotak input dengan mudah.

2. Gunakan v-model.number untuk menapis aksara bukan angka

Walaupun atribut jenis boleh digunakan untuk mengehadkan jenis input kotak input, pengguna masih boleh memasukkan bukan angka watak. Untuk memastikan bahawa hanya nombor boleh dimasukkan ke dalam kotak input nombor, kita perlu menggunakan arahan v-model.number untuk menapis aksara bukan angka.

<template>
  <div>
    <label>数字输入框：</label>
    <input type="number" v-model.number="numberValue"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

Dalam kod di atas, kita hanya perlu menambah pengubah suai .number pada arahan v-model untuk melaksanakan fungsi menapis aksara bukan angka. Dengan cara ini, walaupun pengguna cuba memasukkan aksara bukan angka, Vue akan menapisnya secara automatik untuk memastikan bahawa hanya terdapat aksara angka dalam kotak input.

3 Gunakan atribut min dan maks untuk mengehadkan julat input nombor

Selain mengehadkan jenis input dan menapis aksara bukan angka, kotak input nombor juga boleh mengehadkan nombor yang boleh dimasukkan dengan menetapkan skop min dan maks.

<template>
  <div>
    <label>数字输入框（0-100）：</label>
    <input type="number" v-model.number="numberValue" min="0" max="100"></input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    }
  }
}
</script>

Dalam kod di atas, kami mengehadkan julat input angka kepada antara 0 dan 100 dengan menetapkan atribut min dan maks. Jika nombor yang dimasukkan oleh pengguna kurang daripada 0 atau lebih daripada 100, kotak input akan bertukar merah secara automatik dan tidak boleh diserahkan.

Ringkasan

Dengan menggunakan atribut jenis, arahan v-model.number dan atribut min dan maks, kita boleh dengan mudah menyedari perbezaan antara kotak input nombor dan kotak input teks. Dalam pembangunan sebenar, kami hanya perlu menggunakan mata pengetahuan ini secara fleksibel untuk membawa pengguna pengalaman input yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan perbezaan antara kotak input nombor dan kotak input teks dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!