How to use Vue to implement label input box special effects

How to use Vue to implement tag input box special effects

Introduction:
With the development of web applications, we often encounter scenarios where multiple tags need to be entered. , such as entering an email address or adding a user label, etc. In order to improve the user experience, you can use the Vue framework to implement a tag input box special effect, allowing users to enter and delete tags more conveniently. This article will introduce in detail how to use Vue to achieve this special effect and provide specific code examples.

1. Preparation work
First, we need to introduce Vue into the project. You can install Vue through npm, or introduce the development version of Vue directly through the script tag. In order to simplify the operation, this article will take the introduction of script tags into Vue as an example. Add the following code in the

tag of the html file:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

2. Create a Vue instance
Next, create a Vue instance in the JavaScript file and define the data and methods. We will use an array to store the entered labels, and a variable to store the currently entered labels. The code example is as follows:

new Vue({
  el: '#app',
  data: {
    tags: [],
    inputTag: ''
  },
  methods: {
    addTag() {
      if (this.inputTag.trim() !== '') {
        this.tags.push(this.inputTag.trim());
        this.inputTag = '';
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
});

3. Write HTML template
In the HTML file, we need to write the HTML structure of the label input box and bind the Vue instance to the structure. The code example is as follows:

<div id="app">
  <div class="tags">
    <span class="tag" v-for="(tag, index) in tags" :key="index">
      <span class="tag-text">{{ tag }}</span>
      <span class="tag-close" @click="removeTag(index)">&times;</span>
    </span>
    <input type="text" class="tag-input" v-model="inputTag" @keydown.enter.prevent="addTag" placeholder="输入标签并按回车添加" />
  </div>
</div>

4. Add CSS styles
In order to make the label input box have a better appearance, we need to add some CSS styles. The style can be adjusted according to actual needs. Here is a simple style example:

.tags {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
}

.tag {
  display: inline-flex;
  align-items: center;
  margin: 2px;
  padding: 3px 5px;
  background-color: #eee;
  border-radius: 3px;
}

.tag-text {
  margin-right: 5px;
}

.tag-close {
  cursor: pointer;
}

.tag-input {
  border: none;
  outline: none;
}

5. Run and test
After completing the above steps, we can run the project and test the special effects of the label input box. . When testing, you can enter a tag and press Enter to add it, and then click the close icon on the tag to delete it. You can verify that the add and remove functions for tags are working properly.

Summary:
Through the above steps, we successfully used Vue to implement a label input box special effect. Of course, this is just a simple example, and you can adjust the style and logic according to your project needs. I hope this article will help you use Vue to implement special effects for label input boxes. I wish you success!

The above is the detailed content of How to use Vue to implement label input box special effects. For more information, please follow other related articles on the PHP Chinese website!