Rumah > hujung hadapan web > View.js > Bagaimana untuk melaksanakan borang responsif dan komponen borang tersuai di bawah Vue?

Bagaimana untuk melaksanakan borang responsif dan komponen borang tersuai di bawah Vue?

WBOY
Lepaskan: 2023-06-27 15:11:10
asal
1663 orang telah melayarinya

Vue, sebagai rangka kerja JavaScript yang biasa digunakan, menyediakan alatan yang sangat mudah dan berkuasa untuk memproses input borang. Vue menyediakan sifat dan peristiwa reaktif yang membolehkan kami mengendalikan input, pengesahan dan penyerahan borang dengan mudah. Artikel ini akan memperkenalkan cara melaksanakan borang responsif dan komponen borang tersuai di bawah Vue.

1. Pelaksanaan borang responsif Vue

  1. Pengikatan model borang

Vue menyediakan cara yang sangat mudah untuk melaksanakan input data borang dan respons automatik. Melalui arahan model-v, kita boleh mengikat setiap medan input pada borang kepada atribut data pada contoh Vue untuk mencapai pengikatan data dua hala.

Contohnya: Kita boleh melaksanakan bentuk mudah melalui kod berikut, di mana nilai input terikat pada atribut mesej dalam data melalui model v. Apabila kami memasukkan kandungan dalam kotak input, kandungan dalam kotak input dan nilai atribut mesej dalam data akan dikemas kini secara serentak:

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

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>
Salin selepas log masuk
  1. Pengesahan borang

Pengesahan borang adalah tugas yang tidak dapat dielakkan dalam pembangunan web harian kami. Vue juga menyediakan cara unik untuk mengendalikan pengesahan borang Dengan menggabungkan atribut yang dikira dan atribut pemerhati dengan arahan model-v, kami boleh melaksanakan pengesahan nilai borang dengan mudah.

Sebagai contoh: Kami boleh melaksanakan pengesahan borang mudah melalui kod berikut Apabila pengguna memasukkan kata laluan, kami mengesahkan kata laluan melalui atribut pengiraan dan atribut pemerhati, dan kemudian meminta pengguna untuk kekuatan kata laluan:

<template>
  <div>
    <label>请输入密码:</label>
    <input type="password" v-model="password" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: "",
    };
  },

  computed: {
    message() {
      let pwd = this.password;
      if (pwd.length <= 5) return "密码强度较弱";
      if (pwd.length <= 9) return "密码强度一般";
      return "密码强度较高";
    },
  },

  watch: {
    password(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal.length >= 10) {
        alert("密码长度不能超过10");
        this.password = oldVal;
      }
    },
  },
};
</script>
Salin selepas log masuk
.
  1. Penyerahan borang

Penyerahan borang ialah fungsi teras Vue Melalui arahan v-on dan atribut kaedah, kita boleh mengikat kaedah Vue dengan acara penyerahan borang. Apabila pengguna mengisi borang dan mengklik butang hantar, Vue akan memanggil kaedah ini dan menghantar data borang sebagai parameter Kami boleh memproses data yang diserahkan oleh pengguna dalam kaedah ini.

Sebagai contoh: Kami boleh melaksanakan penyerahan borang mudah melalui kod berikut Apabila pengguna mengklik butang hantar, kami boleh memformat data borang dalam JSON dan mengeluarkannya dalam konsol:

<template>
  <div>
    <label>请输入用户名:</label>
    <input type="text" v-model="username" />

    <label>请输入密码:</label>
    <input type="password" v-model="password" />

    <button v-on:click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>
Salin selepas log masuk

2. Pelaksanaan komponen borang tersuai

.

Selain komponen borang terbina dalam yang disediakan oleh Vue, kami juga boleh menentukan beberapa komponen borang tersuai mengikut keperluan kami sendiri untuk mencapai penggunaan semula dan logik kod.

Vue menyediakan kaedah Vue.component() untuk menentukan komponen tersuai. Kami hanya perlu mentakrifkan komponen melalui kaedah Vue.component() dan kemudian gunakan komponen ini dalam templat.

Berikut ialah contoh komponen tersuai mudah, yang mengandungi komponen medan borang yang ditentukan pengguna dan komponen butang terbina dalam. Dalam komponen ini, kami meletakkan komponen medan borang yang ditentukan pengguna dan komponen butang terbina dalam dalam bentuk yang sama Apabila pengguna mengklik butang, permintaan untuk menyerahkan data akan dikeluarkan.

<template>
  <form>
    <custom-input v-model="username" label="用户名:" />
    <custom-input v-model="password" label="密码:" />
    <button type="button" v-on:click="submitForm">提交</button>
  </form>
</template>

<script>
Vue.component("custom-input", {
  props: ["label", "value"],
  template: `
    <div>
      <label>{{ label }}</label>
      <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
    </div>
  `,
});

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  methods: {
    submitForm() {
      let formData = {
        username: this.username,
        password: this.password,
      };

      console.log(JSON.stringify(formData));
    },
  },
};
</script>
Salin selepas log masuk

Ringkasan:

Melaksanakan borang responsif dan komponen borang tersuai di bawah Vue ialah salah satu kemahiran penting dalam pembangunan web kami. Melalui pengikatan data dua hala bagi arahan v-model, pengesahan bentuk atribut yang dikira, kawalan input borang bagi atribut pemerhati dan takrifan komponen bentuk tersuai bagi kaedah Vue.component(), kita boleh melaksanakan dengan mudah sistem pemprosesan Borang yang cekap, berkuasa dan mudah diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan borang responsif dan komponen borang tersuai di bawah Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan