How to implement a labeled input box using Vue?

With the development of web applications, labeled input boxes are becoming more and more popular. This kind of input box allows users to input data more conveniently, and also facilitates users to manage and search the entered data. Vue is a very powerful JavaScript framework that can help us quickly implement labeled input boxes. This article will introduce how to use Vue to implement a labeled input box.

Step one: Create a Vue instance

First, we need to create a Vue instance on the page, the code is as follows:

<template>
  <div>
    <div>
      <label>标签：</label>
      <input type="text" v-model="newTag" v-on:keyup.enter="addTag">
    </div>
    <div>
      <label>标签列表：</label>
      <div v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ["标签1", "标签2", "标签3"],
      newTag: ""
    };
  },
  methods: {
    addTag() {
      if (this.newTag.trim() !== "") {
        this.tags.push(this.newTag.trim());
        this.newTag = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

In the code, we create a Vue instance containing a Vue component with input box and a list of tags. The input box is used to add new tags, and the tag list is used to display existing tags and provides the function of deleting tags.

In the data method of the component, we define two data items: tags is used to store the data of all tags. The initial value is one containing three tags. The array; newTag is used to store the data of the new tag entered by the user, and the initial value is an empty string.

In methods, we define two methods: addTag is used to add a new tag, which will add the new tag after the user presses the Enter key. to the tags array, and set newTag to an empty string; removeTag is used to delete tags, it will be removed from based on the incoming tag index tags Delete the corresponding tag from the array.

Step 2: Display the tag list

Next, we need to display the tag list. To achieve this functionality, we use the v-for directive in Vue. The v-for directive can loop through the data in an array and display it on the page.

In the code, we use v-for="(tag, index) in tags" to loop through all the tags in the tags array, tag represents each tag in the array, and index represents the index of the tag in the array. We use the :key="index" attribute to uniquely identify the index of the tag, which helps Vue optimize the performance of the component.

Step 3: Add a new tag

When the user enters a new tag in the input box and presses the Enter key, we need to add the new tag to tags in the array. To achieve this functionality, we use the v-model directive in Vue. v-model The directive can bidirectionally bind the data in the component to the form elements on the page.

In the code, we use v-model="newTag" to bidirectionally bind the value in the input box to the newTag data in the component. In this way, when the user enters a new tag in the input box, the value of newTag will also change accordingly.

We also used the v-on directive in Vue to listen for user key events. When the user presses the Enter key, v-on:keyup.enter will trigger the addTag method to add the new tag to the tags array.

Step 4: Delete Tags

Finally, we need to allow users to delete tags. To achieve this functionality, we use a button, and when the user clicks the button, we remove the corresponding tag from the tags array.

In the code, we use the v-on directive in Vue to listen to the user's click event. When the user clicks the delete button, v-on:click will trigger the removeTag method, taking the incoming tag index as a parameter and removing the corresponding tag from the tags array. Tag of.

Summary

Through the above demonstration, we learned how to use Vue to implement a labeled input box. We used the v-for, v-model and v-on directives in Vue to display the label list and the value of the two-way binding input box. As well as listening to keyboard and mouse events for input boxes and buttons. In actual projects, we can customize the label style and operation method according to needs to achieve a more flexible labeled input box.

The above is the detailed content of How to implement a labeled input box using Vue?. For more information, please follow other related articles on the PHP Chinese website!