Vue data addition and deletion

Vue.js is a very popular front-end framework. Its main feature is the use of MVVM (Model-View-ViewModel) architectural pattern. Data binding of Vue.js is one of its most important features. This feature can keep data and views in sync.

In Vue.js, we can perform operations such as adding, deleting, checking, and modifying in simple ways. This article will explore data addition and deletion operations in Vue.js.

1. Data addition

In Vue.js, we can use the v-bind and v-model instructions to bind data. The v-bind directive is used to bind data to HTML elements, and v-model is used to bind form elements and data together.

When data is added, we can use the Vue.set method provided by Vue.js to dynamically add a property, and at the same time ensure that Vue can monitor this property when using the $set method on the object. Variety.

The following is an example of adding 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>

In the above example, we use the v-for directive to render a list. In the form, we use the v-model directive to bind the values ​​of name and age. When the "Add Item" button is clicked, the addItem method will be triggered, add a new object to the items array through the this.items.push() method, and then clear the input box in the form.

2. Data deletion

The method of deleting data in Vue.js is very similar to the method of adding data. We can use the splice method provided by Vue.js to delete elements in the array. Also make sure Vue listens to this change.

The following is an example of deleting 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>

In the above example, we use the v-for directive to render a list. On each list item, we added a "Remove Item" button. When the button is clicked, the removeItem method will be triggered to remove the array item of the corresponding index through the this.items.splice() method.

3. Summary

In general, the data addition and deletion operations of Vue.js are very simple. We can easily manipulate data through the methods provided by Vue.js, and let Vue.js listen. to data changes, thereby updating the view synchronously. During development, we can choose to use different methods to add and delete data according to different scenarios.

The above is the detailed content of Vue data addition and deletion. For more information, please follow other related articles on the PHP Chinese website!