如何使用 Vue 實現標籤的輸入框？

隨著 Web 應用的發展，標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據，同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue 是一款非常強大的 JavaScript 框架，它可以幫助我們快速實現標籤的輸入框。本文將介紹如何使用 Vue 實作標籤的輸入框。

第一步：建立Vue 實例

首先，我們需要在頁面上建立Vue 實例，程式碼如下：

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

在程式碼中，我們建立了一個包含一個輸入框和一個標籤清單的Vue 元件。輸入框用於新增標籤，標籤清單用於展示現有的標籤，並提供刪除標籤的功能。

在元件的data 方法中，我們定義了兩個資料項：tags 用於儲存所有標籤的數據，初始值為一個包含三個標籤的陣列；newTag 用於儲存使用者輸入的新標籤的數據，初始值為空字串。

在methods 中，我們定義了兩個方法：addTag 用於新增標籤，它會在使用者按下回車鍵後將新標籤新增到tags 陣列中，並將newTag 設為空字串；removeTag 用於刪除標籤，它會根據傳入的標籤索引從 tags 陣列中刪除對應的標籤。

第二步：展示標籤清單

接下來，我們需要將標籤清單展示出來。為了實現這項功能，我們使用了 Vue 中的 v-for 指令。 v-for 指令可以將一個陣列中的資料循環展示到頁面上。

在程式碼中，我們使用v-for="(tag, index) in tags" 迴圈遍歷了tags 陣列中的所有標籤， tag 表示陣列中的每個標籤，index 表示標籤在陣列中的索引。我們使用 :key="index" 屬性將標籤的索引作為唯一標識，這有助於 Vue 優化元件的效能。

第三步：新增標籤

當使用者在輸入框中輸入新標籤並按下回車鍵時，我們需要將新標籤新增至tags#數組中。為了實現這項功能，我們使用了 Vue 中的 v-model 指令。 v-model 指令可以將元件中的資料和頁面上的表單元素進行雙向綁定。

在程式碼中，我們使用 v-model="newTag" 將輸入框中的值與元件中的 newTag 資料進行了雙向綁定。這樣，當使用者在輸入框中輸入新標籤時，newTag 的值也會跟著改變。

我們也使用了 Vue 中的 v-on 指令來監聽使用者的按鍵事件。當使用者按下回車鍵時，v-on:keyup.enter 會觸發 addTag 方法，將新標籤加入 tags 陣列中。

第四步：刪除標籤

最後，我們需要讓使用者可以刪除標籤。為了實現這項功能，我們使用了一個按鈕，當使用者點擊按鈕時，我們會從 tags 陣列中刪除對應的標籤。

在程式碼中，我們使用了 Vue 中的 v-on 指令來監聽使用者的點擊事件。當使用者點擊刪除按鈕時，v-on:click 會觸發removeTag 方法，將傳入的標籤索引作為參數，從tags 陣列中刪除對應的標籤。

總結

透過上面的展示，我們學習如何使用 Vue 實作標籤的輸入框。我們使用了Vue 中的v-for、v-model 和v-on 指令，來展示標籤清單、雙向綁定輸入框的值，以及監聽輸入框和按鈕的鍵盤和滑鼠事件。在實際專案中，我們可以根據需求自訂標籤的樣式和操作方法，來實現更靈活的標籤的輸入框。

以上是如何使用 Vue 實現標籤的輸入框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！