Vue front-end implements addition, deletion, modification and query

Vue.js is a popular front-end framework for building high-performance single-page applications. This article will introduce how to use Vue.js to implement the add, delete, modify and check functions.

1. Create a basic framework with Vue.js

First, we need to install Vue.js. You can download the compressed file of Vue.js from the official website, or reference the Vue.js library through CDN.

Create an HTML file and introduce the Vue.js library. Next, we will initialize a Vue instance and define a list in the template:

<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>

The v-for directive in the template is used to loop through each element in the items list. Because we specified the initial value of items during instantiation, the above list will show these three elements. This is an example of a simple Vue.js application.

2. Implement the function of adding elements

Type the following code:

<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>

In the template, we added a text input box and an "Add Item" button, And bind the v-model directive to the newItem attribute in data. In the Vue instance, we have defined a method called addItem that will be called when the user clicks the "Add Item" button to add the item to the list.

The value of the input box is saved in the newItem attribute. When the addItem method is called, we insert it into the items list and then reset the value of the newItem attribute. Finally, Vue.js automatically re-renders the list and displays it in the browser.

3. Implement the function of deleting elements

Next, we will implement the function of deleting elements. We need to add a button to delete each list item with one click.
Type the following code:

<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>

We added a method named removeItem and bound it to the "Delete" button in the list. When the user clicks the "Remove" button, the removeItem method will be called and delete the corresponding item in the list. Here we can call it with the second parameter (index) to delete a specific item.

4. Implement the function of modifying elements

Next, we will implement the function of editing items. We can place an input box in each list item. When the user clicks the input box, it will become an edit state, allowing the user to modify the text content of the item. Type the following code:

<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>

We added an input box and two buttons to each list item: an edit button and a delete button. In the Vue instance, we added a method called editItem that will be called when the user clicks the Edit button.

With this method, we can set the editing status (editing) to true or false. If the item is being edited, we will display the text content of the item, otherwise we will display an input box to allow the user to make changes.

Finally, we just need to reset the editing property to false after saving the changes.

5. Summary

Through this article, we have learned how to use the Vue.js framework to implement a simple add, delete, modify, and check function. Using Vue.js can help developers quickly build complex single-page applications and make development more efficient.

Vue.js has many other functions and features that developers can explore deeply and apply to their own projects.

The above is the detailed content of Vue front-end implements addition, deletion, modification and query. For more information, please follow other related articles on the PHP Chinese website!