Penjelasan terperinci tentang cara vue menyembunyikan butang dalam senarai

Dengan pembangunan berterusan dan populariti Vue, semakin ramai pembangun bahagian hadapan menyertai barisan Vue. Vue ialah rangka kerja pembangunan bahagian hadapan yang sangat berkuasa dan mudah digunakan. Kemudahan pembelajaran dan fleksibiliti menjadikannya salah satu pilihan kegemaran di kalangan pembangun. Walau bagaimanapun, anda akan menghadapi beberapa masalah sukar semasa proses pembangunan, seperti menyembunyikan butang dalam senarai. Jadi, bagaimana untuk menggunakan Vue untuk melaksanakan fungsi ini?

Pertama, kita perlu memahami konsep asas: pemaparan bersyarat. Paparan bersyarat ialah ciri yang sangat penting dalam Vue. Ia membolehkan kami memutuskan sama ada untuk membuat komponen atau elemen berdasarkan syarat tertentu. Terdapat banyak cara untuk melakukan pemaparan bersyarat dalam Vue, seperti menggunakan arahan seperti v-if, v-else-if dan v-else.

Seterusnya, kami akan menunjukkan cara menggunakan arahan v-if untuk menyembunyikan butang dalam senarai. Katakan kita mempunyai komponen Senarai, Senarai, yang mengandungi komponen Butang, Butang. Kita perlu memutuskan sama ada untuk membuat butang ini berdasarkan syarat tertentu.

Pertama, dalam komponen Senarai, kita perlu mengisytiharkan pembolehubah untuk menyimpan status sama ada butang itu perlu dipaparkan. Kita boleh menggunakan atribut data untuk menentukan pembolehubah boolean isButtonVisible.

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <button v-if="isButtonVisible">button</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonVisible: false,
      list: [
        { id: 1, name: "apple" },
        { id: 2, name: "banana" },
        { id: 3, name: "orange" },
      ],
    };
  },
};
</script>

Dalam kod di atas, kami mentakrifkan senarai yang mengandungi nama tiga buah. Kami juga mentakrifkan pembolehubah isButtonVisible dengan nilai awal palsu. Butang komponen butang hanya akan dipaparkan apabila nilai isButtonVisible adalah benar.

Sekarang persoalannya datang, apabila kita perlu menyembunyikan butang dalam senarai, apakah yang perlu kita lakukan? Ia sebenarnya sangat mudah, anda hanya perlu mengubah suai nilai isButtonVisible apabila butang diklik.

Dalam komponen Butang, kita boleh menentukan kaedah handleClick, yang akan dicetuskan apabila butang diklik. Dalam kaedah ini, kita boleh mengubah suai nilai isButtonVisible bagi elemen yang sepadan berdasarkan nilai indeks butang.

<template>
  <button @click="handleClick">button</button>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      required: true,
    },
  },
  methods: {
    handleClick() {
      this.$emit("hide-button", this.index);
    },
  },
};
</script>

Dalam kod di atas, kami mentakrifkan indeks atribut props untuk menyimpan nilai indeks item senarai di mana butang semasa terletak. Apabila butang diklik, butang sembunyikan acara diteruskan melalui ini.$emit dan membawa nilai indeks butang semasa untuk diproses dalam komponen Senarai.

Akhir sekali, dalam komponen Senarai, kita perlu menambah pendengar acara untuk mendengar acara butang sembunyi. Apabila peristiwa dicetuskan, kami boleh mengubah suai nilai isButtonVisible yang sepadan berdasarkan nilai indeks yang diluluskan.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <button v-if="isButtonVisible">button</button>
        <button-logic :index="index" @hide-button="hideButton"></button-logic>
      </li>
    </ul>
  </div>
</template>

<script>
import ButtonLogic from "./ButtonLogic.vue";

export default {
  data() {
    return {
      isButtonVisible: false,
      list: [
        { id: 1, name: "apple" },
        { id: 2, name: "banana" },
        { id: 3, name: "orange" },
      ],
    };
  },
  components: {
    ButtonLogic,
  },
  methods: {
    hideButton(index) {
      this.$set(this.list[index], "isButtonVisible", false);
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan komponen yang dipanggil ButtonLogic untuk memaparkan butang. Komponen ini menerima indeks atribut props, yang mewakili nilai indeks butang semasa.

Kami mentakrifkan kaedah bernama hideButton untuk mengendalikan acara hide-button. Kaedah ini menerima indeks parameter, yang mewakili nilai indeks butang semasa. Dalam kaedah ini, kami menggunakan kaedah $set yang disediakan oleh Vue untuk mengubah suai nilai isButtonVisible bagi elemen yang sepadan kepada palsu.

Akhir sekali, gunakan komponen ButtonLogic dalam komponen List dan sembunyikan butang dalam senarai melalui event listener hideButton.

Ringkasan

Gunakan Vue untuk menyembunyikan butang dalam senarai, yang boleh dicapai melalui pemaparan bersyarat. Kita boleh mentakrifkan pembolehubah untuk menyimpan status sama ada butang itu perlu dipaparkan dan memutuskan sama ada untuk membuat elemen di bawah keadaan tertentu. Apabila kita perlu menyembunyikan butang, kita boleh melakukannya dengan mengubah suai nilai pembolehubah elemen yang sepadan.

Artikel ini menunjukkan cara menggunakan arahan v-if untuk melaksanakan fungsi menyembunyikan butang Proses pelaksanaan khusus juga sangat mudah. Walau bagaimanapun, dalam proses pembangunan sebenar, terdapat banyak cara lain untuk mencapai kesan yang sama. Oleh itu, adalah perlu untuk memilih penyelesaian yang paling sesuai berdasarkan keperluan perniagaan tertentu dan senario pembangunan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara vue menyembunyikan butang dalam senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!