Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah fungsi untuk menukar tatasusunan dalam Vue?

Apakah fungsi untuk menukar tatasusunan dalam Vue?

PHPz
Lepaskan: 2023-04-13 10:49:02
asal
635 orang telah melayarinya

Vue ialah rangka kerja JavaScript progresif untuk membina antara muka web interaktif, yang menawarkan kelebihan kemudahan penggunaan dan pembangunan pesat. Dalam Vue, kita biasanya menghadapi situasi di mana kita perlu menukar tatasusunan Untuk keperluan ini, Vue menyediakan beberapa fungsi mudah untuk menukar tatasusunan.

  1. kaedah tolak

kaedah tolak ialah salah satu fungsi pengubahsuaian tatasusunan yang paling biasa digunakan dalam Vue, yang boleh menambah satu atau lebih elemen pada penghujung tatasusunan. Sintaksnya adalah seperti berikut:

array.push(element1, ..., elementX)
Salin selepas log masuk

Antaranya, elemen1 kepada elementX ialah elemen yang akan ditambah, yang boleh daripada sebarang jenis Tatasusunan akan berkembang secara dinamik mengikut parameter yang diluluskan. Apabila menggunakan kaedah tolak, Vue akan mengemas kini paparan secara automatik supaya pengguna dapat melihat hasil tambahan.

Sebagai contoh, kami mempunyai komponen Vue berikut:

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["苹果", "西瓜", "香蕉"]
    };
  },
  methods: {
    addItem() {
      this.items.push("橘子");
    }
  }
};
</script>
Salin selepas log masuk

Dalam komponen ini, kami menggunakan arahan v-for untuk menggelungkan setiap elemen dalam tatasusunan item dan menambah "Tambah "butang. Apabila pengguna mengklik butang, kaedah addItem akan dipanggil, menggunakan kaedah tolak untuk menambah "oren" pada penghujung tatasusunan. Vue akan mengemas kini paparan secara automatik untuk membolehkan pengguna melihat hasil tambah.

  1. kaedah pop

Kaedah pop adalah bertentangan dengan kaedah tolak Ia boleh memadamkan elemen terakhir dalam tatasusunan dan mengembalikan elemen. Sintaks adalah seperti berikut:

array.pop()
Salin selepas log masuk

Apabila menggunakan kaedah pop, Vue juga akan mengemas kini paparan secara automatik dan membentangkan hasil yang dipadamkan kepada pengguna.

Sebagai contoh, kami menambah butang "padam" pada komponen Vue di atas:

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
    <button @click="delItem">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["苹果", "西瓜", "香蕉"]
    };
  },
  methods: {
    addItem() {
      this.items.push("橘子");
    },
    delItem() {
      this.items.pop();
    }
  }
};
</script>
Salin selepas log masuk

Dalam komponen ini, kami menambah butang "padam", dan kaedah delItem akan Yang terakhir elemen dalam dipadamkan. Apabila pengguna mengklik butang "Padam", Vue akan mengemas kini paparan secara automatik untuk memaparkan hasil yang dipadamkan.

  1. kaedah anjakan

Serupa dengan kaedah pop, kaedah anjakan juga boleh memadamkan elemen pertama dalam tatasusunan dan mengembalikan elemen tersebut. Sintaksnya adalah seperti berikut:

array.shift()
Salin selepas log masuk

Apabila menggunakan kaedah anjakan, Vue juga akan mengemas kini paparan secara automatik dan membentangkan hasil yang dipadamkan.

Sebagai contoh, kami mengubah suai komponen Vue di atas, memasukkannya pada permulaan tatasusunan apabila menambah dan memadam permulaan tatasusunan apabila memadam:

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
    <button @click="delItem">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["苹果", "西瓜", "香蕉"]
    };
  },
  methods: {
    addItem() {
      this.items.unshift("橘子");
    },
    delItem() {
      this.items.shift();
    }
  }
};
</script>
Salin selepas log masuk

Dalam komponen ini, kami menggunakan kaedah unshift untuk menambah elemen Pada permulaan tatasusunan, kaedah anjakan memadamkan elemen pada permulaan tatasusunan. Vue juga akan mengemas kini paparan secara automatik apabila pengguna mengklik butang.

  1. kaedah sambung

Kaedah sambung boleh digunakan untuk menambah atau mengalih keluar elemen daripada tatasusunan, dan boleh menentukan lokasi penambahan dan pemadaman. Sintaksnya adalah seperti berikut:

array.splice(index, howmany, item1, ....., itemX)
Salin selepas log masuk

Antaranya, parameter indeks menunjukkan kedudukan permulaan menambah atau memadam elemen, berapa parameter menunjukkan bilangan elemen yang perlu dipadam, dan item1 hingga itemX ialah elemen. untuk ditambah. Apabila menggunakan kaedah splice, Vue akan mengemas kini paparan secara automatik supaya pengguna dapat melihat tatasusunan yang diubah suai.

Sebagai contoh, kami mempunyai komponen Vue berikut:

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="addItem">添加</button>
    <button @click="delItem">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["苹果", "西瓜", "香蕉"]
    };
  },
  methods: {
    addItem() {
      this.items.splice(1, 0, "橙子");
    },
    delItem() {
      this.items.splice(1, 1);
    }
  }
};
</script>
Salin selepas log masuk

Dalam komponen ini, kami menggunakan kaedah splice untuk menambah "oren" pada kedudukan 1 dan memadam satu pada elemen kedudukan 1 . Apabila pengguna mengklik butang, Vue akan mengemas kini paparan secara automatik untuk memaparkan hasil yang diubah suai.

Ringkasan

Fungsi pengubahsuaian tatasusunan Vue termasuk push, pop, shift dan splice, dsb. Mereka boleh menambah, memadam atau menukar elemen dalam tatasusunan dengan mudah dan Vue akan mengemas kini paparan secara automatik, membenarkan Pengguna melihat hasil yang diubah suai. Dalam pembangunan sebenar, kita boleh menggunakan fungsi ini secara fleksibel mengikut keperluan sebenar untuk meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Apakah fungsi untuk menukar tatasusunan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan