Kotak input Vue tidak boleh memasukkan nombor negatif

Vue ialah rangka kerja JavaScript popular yang digunakan untuk membangunkan aplikasi web. Vue menjadikan pembangunan bahagian hadapan lebih mudah dan lebih intuitif kerana Vue responsif, bermakna apabila data berubah, halaman dikemas kini secara automatik. Kotak input ialah salah satu komponen yang biasa digunakan dalam aplikasi Vue. Walau bagaimanapun, kadangkala kami mungkin perlu mengehadkan jenis atau julat nilai yang dimasukkan oleh pengguna, contohnya, kami tidak membenarkan pengguna memasukkan nombor negatif. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini dalam Vue.

1. Gunakan arahan v-model

Arahan model-v digunakan untuk mengikat nilai elemen borang kepada atribut data dalam komponen Vue. Dalam kotak input, arahan model-v membolehkan kami mendapatkan nilai yang dimasukkan oleh pengguna dan mengendalikannya dengan mudah. Anda boleh menggunakan arahan model v untuk mengesahkan bahawa nilai yang dimasukkan oleh pengguna ialah nombor negatif. Contohnya:

<input type="number" v-model="value" min="0" @input="checkNegative">

Dalam contoh ini, kami menggunakan kotak input dengan atribut jenis "nombor" dan mengikatnya pada atribut nilai dalam komponen Vue. Selain itu, kami menetapkan atribut min kepada 0, memastikan bahawa nilai itu tidak boleh negatif. Apabila pengguna menaip, kami akan memanggil kaedah checkNegative untuk menyemak sama ada nilai yang dimasukkan adalah negatif:

checkNegative() {
  this.value = Math.max(0, parseInt(this.value));
}

Dalam kaedah checkNegative, kami menukar nilai yang dimasukkan kepada integer dan membandingkannya dengan 0. Jika nilai input kurang daripada 0, ia ditetapkan kepada 0. Dengan cara ini, kami boleh menyekat pengguna daripada memasukkan nombor negatif.

2. Gunakan sifat terkira

Selain arahan model v, kami juga boleh menggunakan sifat terkira untuk mengesahkan nilai yang dimasukkan oleh pengguna. Dalam aplikasi Vue, sifat yang dikira dikira berdasarkan sifat data komponen Vue. Kami boleh menggunakan sifat yang dikira untuk menyemak sama ada nilai yang dimasukkan oleh pengguna adalah negatif dan mengemas kini komponen Vue kami. Contohnya:

<template>
  <div>
    <input type="number" v-model="value" @input="updateValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  computed: {
    checkedValue: function() {
      return Math.max(0, this.value);
    }
  },
  methods: {
    updateValue: function(event) {
      this.value = parseInt(event.target.value);
    }
  }
};
</script>

Dalam contoh ini, kami mentakrifkan sifat terkira yang dipanggil "checkedValue" yang dikira berdasarkan atribut nilai. Dalam harta yang dikira, kami mengemas kini sifat nilai kepada nilai yang lebih besar daripada atau sama dengan 0. Dalam kotak input, kami mengikat nilai kotak input kepada atribut nilai dan bukannya atribut checkedValue. Setiap kali pengguna memasukkan input, kami akan mengemas kini atribut nilai menggunakan kaedah updateValue.

3. Gunakan arahan tersuai

Selain arahan model v dan sifat yang dikira, kami juga boleh menggunakan arahan tersuai untuk menyekat pengguna daripada memasukkan nombor negatif. Arahan tersuai ialah ciri lanjutan dalam Vue yang membolehkan kami menyesuaikan gelagat elemen DOM. Kami boleh menggunakan arahan tersuai untuk mengawal input pengguna dan memastikan mereka tidak memasukkan nombor negatif.

<template>
  <div>
    <input v-negative-number v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    };
  },
  directives: {
    "negative-number": function(el, binding) {
      el.addEventListener("input", function(event) {
        var currentValue = parseInt(event.target.value);
        if (currentValue < 0) {
          event.target.value = 0;
          return binding.value;
        } else {
          event.target.value = currentValue;
          return currentValue;
        }
      });
    }
  }
};
</script>

Dalam contoh ini, kami mentakrifkan arahan tersuai yang dipanggil "nombor negatif". Dalam arahan, kami menggunakan kaedah addEventListener untuk mendengar acara input. Dalam pengendali acara, kami menyemak sama ada nilai yang dimasukkan oleh pengguna adalah negatif. Jika input ialah nombor negatif, ia ditetapkan kepada 0, jika tidak, ia dibiarkan tidak berubah.

Ringkasan

Dalam artikel ini, kami memperkenalkan tiga kaedah berbeza untuk menyekat kotak input dalam aplikasi Vue daripada memasukkan nombor negatif. Sama ada anda menyediakan kefungsian ini melalui arahan model v, sifat dikira atau arahan tersuai, Vue menawarkan banyak fleksibiliti. Kami berharap artikel ini membantu anda memahami Vue dengan lebih baik dan meningkatkan kecekapan pembangunan aplikasi Vue anda.

Atas ialah kandungan terperinci Kotak input Vue tidak boleh memasukkan nombor negatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!