Bagaimana untuk melaksanakan kotak input berlabel menggunakan Vue?

Dengan pembangunan aplikasi web, kotak input berlabel menjadi semakin popular. Kotak input jenis ini membolehkan pengguna memasukkan data dengan lebih mudah, dan juga memudahkan pengguna mengurus dan mencari data yang dimasukkan. Vue ialah rangka kerja JavaScript yang sangat berkuasa yang boleh membantu kami melaksanakan kotak input berlabel dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kotak input berlabel.

Langkah 1: Buat instance Vue

Mula-mula, kita perlu mencipta instance Vue pada halaman, kodnya adalah seperti berikut:

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

Dalam kod, kami mencipta komponen Vue yang mengandungi kotak input dan label senarai. Kotak input digunakan untuk menambah teg baharu, dan senarai teg digunakan untuk memaparkan teg sedia ada dan menyediakan fungsi memadam teg.

Dalam kaedah data komponen, kami mentakrifkan dua item data: teg digunakan untuk menyimpan data semua teg Nilai awal ialah tatasusunan yang mengandungi tiga teg . ;newTag digunakan untuk menyimpan data teg baharu yang dimasukkan oleh pengguna. 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

Dalam kaedah, kami mentakrifkan dua kaedah: addTag digunakan untuk menambah teg baharu. Ia akan menambah teg baharu kepada tag dan tetapkan newTag kepada rentetan kosong removeTag digunakan untuk memadamkan tag, yang akan dialih keluar daripada tag Padamkan tag yang sepadan daripada tatasusunan. 🎜🎜Langkah 2: Paparkan senarai tag🎜🎜Seterusnya, kita perlu paparkan senarai tag. Untuk mencapai fungsi ini, kami menggunakan arahan v-for dalam Vue. Arahan v-for boleh melingkari data dalam tatasusunan dan memaparkannya pada halaman. 🎜🎜Dalam kod, kami menggunakan v-for="(tag, index) dalam teg" untuk mengulangi semua teg dalam tatasusunan tag, tag mewakili setiap label dalam tatasusunan, dan <code>index mewakili indeks label dalam tatasusunan. Kami menggunakan atribut :key="index" untuk mengenal pasti secara unik indeks teg, yang membantu Vue mengoptimumkan prestasi komponen. 🎜🎜Langkah 3: Tambah teg baharu🎜🎜Apabila pengguna memasukkan teg baharu dalam kotak input dan menekan kekunci Enter, kita perlu menambah teg baharu pada tatasusunan teg. Untuk mencapai kefungsian ini, kami menggunakan arahan v-model dalam Vue. Arahan v-model boleh mengikat dua hala data dalam komponen kepada elemen borang pada halaman. 🎜🎜Dalam kod, kami menggunakan v-model="newTag" untuk mengikat nilai dua hala dalam kotak input dengan data newTag dalam komponen. Dengan cara ini, apabila pengguna memasukkan teg baharu dalam kotak input, nilai newTag juga akan berubah dengan sewajarnya. 🎜🎜Kami juga menggunakan arahan v-on dalam Vue untuk mendengar peristiwa penting pengguna. Apabila pengguna menekan kekunci Enter, v-on:keyup.enter akan mencetuskan kaedah addTag untuk menambah teg baharu pada tatasusunan tag . 🎜🎜Langkah 4: Padam tag🎜🎜Akhir sekali, kami perlu membenarkan pengguna memadamkan tag. Untuk mencapai fungsi ini, kami menggunakan butang dan apabila pengguna mengklik butang, kami mengalih keluar teg yang sepadan daripada tatasusunan tag. 🎜🎜Dalam kod, kami menggunakan arahan v-on dalam Vue untuk mendengar acara klik pengguna. Apabila pengguna mengklik butang padam, v-on:click akan mencetuskan kaedah removeTag, mengambil indeks teg masuk sebagai parameter daripada tag tatasusunan Padam tag yang sepadan. 🎜🎜Ringkasan🎜🎜Melalui demonstrasi di atas, kami mempelajari cara menggunakan Vue untuk melaksanakan kotak input berlabel. Kami menggunakan arahan v-for, v-model dan v-on dalam Vue untuk memaparkan senarai teg dan kotak input mengikat dua hala nilai, dan mendengar acara papan kekunci dan tetikus untuk kotak input dan butang. Dalam projek sebenar, kami boleh menyesuaikan gaya label dan kaedah operasi mengikut keperluan untuk mencapai kotak input berlabel yang lebih fleksibel. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak input berlabel menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!