Penambahan dan pemadaman data Vue

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular. Ciri utamanya ialah penggunaan corak seni bina MVVM (Model-View-ViewModel). Pengikatan data Vue.js ialah salah satu ciri yang paling penting. Ciri ini boleh memastikan data dan paparan sentiasa disegerakkan.

Dalam Vue.js, kami boleh melakukan operasi seperti menambah, memadam, menyemak dan mengubah suai dengan cara yang mudah. Artikel ini akan meneroka operasi penambahan dan pemadaman data dalam Vue.js.

1. Menambah data

Dalam Vue.js, kita boleh menggunakan arahan v-bind dan v-model untuk mengikat data. Arahan v-bind digunakan untuk mengikat data kepada elemen HTML, dan model v digunakan untuk mengikat elemen bentuk dan data bersama-sama.

Apabila data ditambah, kita boleh menggunakan kaedah Vue.set yang disediakan oleh Vue.js untuk menambahkan atribut secara dinamik Pada masa yang sama, pastikan Vue boleh memantau atribut ini apabila menggunakan kaedah $set pada objek.

Berikut ialah contoh penambahan data.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
    <form>
      <input v-model="name" type="text" placeholder="Name">
      <input v-model="age" type="number" placeholder="Age">
      <button type="submit" @click.prevent="addItem">Add Item</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ],
      name: "",
      age: ""
    };
  },
  methods: {
    addItem() {
      this.items.push({
        name: this.name,
        age: this.age
      });
      this.name = "";
      this.age = "";
    }
  }
};
</script>

Dalam contoh di atas, kami menggunakan arahan v-for untuk memberikan senarai. Dalam borang, kami menggunakan arahan v-model untuk mengikat nama dan nilai umur. Apabila butang "Tambah Item" diklik, kaedah addItem akan dicetuskan, tambah objek baharu pada tatasusunan item melalui kaedah this.items.push() dan kemudian kosongkan kotak input dalam borang.

2. Pemadaman data

Kaedah pemadaman data dalam Vue.js sangat serupa dengan kaedah menambah data Kita boleh menggunakan kaedah sambung yang disediakan oleh Vue.js untuk memadamkan elemen dalam juga pastikan Vue mendengar perubahan ini.

Berikut ialah contoh pemadaman data.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
        <button @click.prevent="removeItem(index)">Remove Item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

Dalam contoh di atas, kami menggunakan arahan v-for untuk memberikan senarai. Pada setiap item senarai, kami menambah butang "Alih Keluar Item". Apabila butang diklik, kaedah removeItem akan dicetuskan untuk mengalih keluar item tatasusunan indeks yang sepadan melalui kaedah this.items.splice().

3. Ringkasan

Secara amnya, operasi penambahan dan pemadaman data Vue.js adalah sangat mudah Kami boleh memanipulasi data dengan mudah melalui kaedah yang disediakan oleh Vue.js, dan membiarkan Vue. js mendengar perubahan data, dengan itu mengemas kini paparan secara serentak. Semasa pembangunan, kita boleh memilih untuk menggunakan kaedah yang berbeza untuk menambah dan memadam data mengikut senario yang berbeza.

Atas ialah kandungan terperinci Penambahan dan pemadaman data Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!