borang vue2 tambah, padam, semak logik perniagaan

Dengan pembangunan berterusan aplikasi web moden, borang masih merupakan kaedah interaksi penting antara pengguna dan aplikasi. Sebagai rangka kerja bahagian hadapan yang popular, Vue2 menyediakan kaedah pemprosesan borang yang mudah, yang boleh melaksanakan operasi penambahan, pemadaman dan pertanyaan borang dengan cepat. Sebelum melaksanakan pertanyaan penambahan dan pemadaman borang Vue2, kita perlu memahami dahulu apa itu Vue2 dan konsep asasnya.

Vue2 ialah rangka kerja JavaScript ringan yang menyokong pembangunan progresif dan merupakan cara untuk membina antara muka pengguna dengan cepat. Idea teras Vue2 adalah untuk memisahkan DOM daripada kod JavaScript, mengikat model objek pada paparan, dan membina aplikasi melalui komponenisasi. Ciri utama Vue2 ialah paparan dipacu data Apabila pembolehubah keadaan komponen berubah, Vue2 akan mengemas kini paparan yang sepadan secara automatik pada halaman. Vue2 juga menyokong ciri seperti arahan dan cangkuk kitaran hayat, yang boleh melaksanakan logik perniagaan yang kompleks dengan mudah.

Seterusnya, kami akan menunjukkan cara menggunakan Vue2 untuk melaksanakan logik perniagaan penambahan borang, pemadaman dan pertanyaan. Dalam contoh ini, kami akan menggunakan Vue2 untuk mencipta aplikasi senarai tugasan yang mudah. Kami akan menggunakan mekanisme komponen Vue2 untuk membina borang senarai, dan melaksanakan operasi tambah, padam dan semak melalui pemindahan data antara komponen. Berikut ialah senarai komponen yang akan kami cipta:

1. TodoList - Komponen senarai
2. TodoItem - Komponen item senarai

Komponen TodoList akan digunakan untuk memaparkan semua item tugasan Senarai item tugasan, manakala komponen TodoItem akan digunakan untuk memaparkan kandungan item tugasan tunggal. Kami akan mencipta berbilang komponen TodoItem dalam komponen TodoList untuk membina senarai tugasan yang lengkap.

Pertama, kita perlu mencipta komponen TodoItem untuk mewakili satu kandungan item tugasan. Kami akan menggunakan prop untuk menghantar data kepada komponen, dan prop ini akan digunakan secara dalaman oleh komponen untuk memaparkan paparan. Kami mentakrifkan kod berikut dalam komponen TodoItem:

<template>
  <div>
    <input type="checkbox" v-model="completed">{{ item.text }}
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      completed: false
    }
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.item)
    }
  }
}
</script>

Dalam kod di atas, kami mula-mula mentakrifkan fail templat komponen dan menggunakan arahan model-v untuk mengikat secara dwiarah keadaan komponen kepada nilai daripada kotak input Tentukan untuk membolehkan pengguna menyemak item tugasan. Kami juga menambah butang "Padam", dan apabila pengguna mengklik butang, kami mengeluarkan acara "memadam-item" dengan menggunakan kaedah $emit, yang menghantar objek data item tugasan sebagai parameter.

Seterusnya, kita perlu menggunakan komponen TodoItem dalam komponen TodoList untuk mencipta berbilang item tugasan. Kami menggunakan arahan v-for untuk mengulangi semua item tugasan dan menghasilkan komponen TodoItem pada setiap item tugasan. Kami mentakrifkan kod berikut dalam komponen TodoList:

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <todo-item :item="item" @delete-item="deleteItem"></todo-item>
    </div>
    
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '完成Vue2表单增删查', completed: false },
        { id: 2, text: '学习JavaScript高级编程', completed: true },
        { id: 3, text: '尝试构建一个全栈应用', completed: false }
      ],
      newItemText: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItemText) {
        let newId = this.items.length + 1
        this.items.push({
          id: newId,
          text: this.newItemText,
          completed: false
        })
        this.newItemText = ''
      }
    },
    deleteItem(item) {
      let index = this.items.findIndex(x => x.id === item.id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

Dalam kod di atas, kami mula-mula mentakrifkan item senarai data, yang mengandungi tiga item tugasan. Kami juga menentukan pembolehubah newItemText, yang digunakan untuk menyimpan kandungan tugasan baharu yang dimasukkan oleh pengguna. Dalam templat, kami menggunakan arahan v-for untuk mengulangi semua item tugasan dan menjadikan setiap item tugasan menggunakan komponen TodoItem. Kami juga mengikat acara serah pada borang untuk menambah item baharu dan menambah item tugasan baharu dalam kaedah tersebut.

Apabila memadamkan item tugasan, kami menggunakan kaedah findIndex untuk mencari indeks item yang hendak dipadamkan dalam borang, dan menggunakan kaedah sambatan untuk memadam item daripada senarai. Apabila pengguna menyemak item tugasan, pembolehubah keadaan komponen akan dikemas kini dan terikat pada nilai kotak input menggunakan arahan v-model.

Melalui contoh yang begitu mudah, kita dapat melihat bahawa menggunakan Vue2 untuk melaksanakan penambahan borang, pemadaman dan pertanyaan adalah sangat mudah dan pantas. Dalam aplikasi praktikal, kami boleh menggunakan mekanisme komponen Vue2 dan ciri pengikatan data untuk mempercepatkan pembangunan dan mengurangkan kebarangkalian ralat, dengan itu mencapai keperluan perniagaan yang lebih kompleks.

Atas ialah kandungan terperinci borang vue2 tambah, padam, semak logik perniagaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!