Bahagian hadapan Vue melaksanakan penambahan, pemadaman, pengubahsuaian dan pertanyaan

Vue.js ialah rangka kerja bahagian hadapan yang popular untuk membina aplikasi satu halaman berprestasi tinggi. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan fungsi tambah, padam, ubah suai dan semak.

1. Buat rangka kerja asas dengan Vue.js

Mula-mula, kita perlu memasang Vue.js. Anda boleh memuat turun fail termampat Vue.js daripada tapak web rasmi, atau merujuk pustaka Vue.js melalui CDN.

Buat fail HTML dan import pustaka Vue.js. Seterusnya, kami akan memulakan contoh Vue dan mentakrifkan senarai dalam templat:

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3']
    }
  })
</script>

Arahan v-untuk dalam templat digunakan untuk menggelungkan setiap elemen dalam senarai item. Kerana kami menentukan nilai awal item semasa instantiasi, senarai di atas akan menunjukkan tiga elemen ini. Ini adalah contoh aplikasi Vue.js yang mudah.

2. Laksanakan fungsi menambah elemen

Taip kod berikut:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    }
  })
</script>

Dalam templat, kami menambah kotak input teks dan butang "Tambah Item". Dan ikat arahan v-model kepada atribut newItem dalam data. Dalam contoh Vue, kami telah menentukan kaedah yang dipanggil addItem yang akan dipanggil apabila pengguna mengklik butang "Tambah Item" untuk menambah item ke senarai.

Nilai kotak input disimpan dalam atribut newItem Apabila kaedah addItem dipanggil, kami memasukkannya ke dalam senarai item dan kemudian menetapkan semula nilai atribut newItem. Akhirnya, Vue.js secara automatik memaparkan semula senarai dan memaparkannya dalam penyemak imbas.

3. Laksanakan fungsi memadam elemen

Seterusnya, kita akan melaksanakan fungsi memadam elemen. Kita perlu menambah butang untuk memadam setiap item senarai dengan satu klik.
Taip kod berikut:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      {{ item }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      }
    }
  })
</script>

Kami menambahkan kaedah yang dipanggil removeItem dan mengikatnya pada butang "Alih Keluar" dalam senarai. Apabila pengguna mengklik butang "Alih Keluar", kaedah removeItem dipanggil dan memadam item yang sepadan daripada senarai. Di sini kita boleh memanggilnya dengan parameter kedua (indeks) untuk memadam item tertentu.

4. Laksanakan fungsi mengubah suai elemen

Seterusnya, kami akan melaksanakan fungsi menyunting item. Kita boleh meletakkan kotak input dalam setiap item senarai Apabila pengguna mengklik kotak input, ia akan menjadi keadaan edit, membolehkan pengguna mengubah suai kandungan teks item tersebut. Taip kod berikut:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      <input v-model="item.text" v-show="!item.editing">
      <span v-show="item.editing">{{ item.text }}</span>
      <button @click="editItem(index)">{{ item.editing ? 'Save' : 'Edit' }}</button>
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'item 1', editing: false },
        { text: 'item 2', editing: false },
        { text: 'item 3', editing: false }
      ],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push({ text: this.newItem, editing: false });
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      },
      editItem: function(index) {
        var item = this.items[index];
        if (item.editing) {
          item.editing = false;
        } else {
          item.editing = true;
        }
      }
    }
  })
</script>

Kami menambah kotak input dan dua butang pada setiap item senarai: butang edit dan butang padam. Dalam contoh Vue, kami menambah kaedah yang dipanggil editItem yang akan dipanggil apabila pengguna mengklik butang Edit.

Dengan kaedah ini, kita boleh menetapkan status penyuntingan (editing) kepada benar atau palsu. Jika item sedang diedit, kami akan memaparkan kandungan teks item tersebut, jika tidak, kami akan memaparkan kotak input untuk membolehkan pengguna membuat perubahan.

Akhir sekali, kita hanya perlu menetapkan semula sifat pengeditan kepada palsu selepas menyimpan perubahan.

5. Ringkasan

Melalui artikel ini, kami telah mempelajari cara menggunakan rangka kerja Vue.js untuk melaksanakan fungsi tambah, padam, ubah suai dan semak yang mudah. Menggunakan Vue.js boleh membantu pembangun membina aplikasi satu halaman yang kompleks dengan cepat dan menjadikan pembangunan lebih cekap.

Vue.js mempunyai banyak fungsi dan ciri lain yang boleh diterokai secara mendalam dan digunakan oleh pembangun pada projek mereka sendiri.

Atas ialah kandungan terperinci Bahagian hadapan Vue melaksanakan penambahan, pemadaman, pengubahsuaian dan pertanyaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!