Apakah maksud seperti dalam vue?

Dalam Vue.js, as ialah parameter pilihan arahan v-for, digunakan untuk menentukan atribut yang harus digunakan oleh setiap elemen dalam gelung. Parameter ini boleh digunakan untuk mengulang tatasusunan atau objek ke dalam elemen DOM. Dalam artikel ini, kita akan melihat dengan lebih dekat apa yang as lakukan dan cara menggunakannya. Penggunaan asas

v-for

Dalam Vue.js, gunakan arahan v-for untuk menggelung dan menjadikan kandungan tatasusunan atau objek ke dalam templat dengan mengikat data. Berikut ialah contoh mudah:

<div id="app">
  <h1>遍历数组：</h1>
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
  <h1>遍历对象：</h1>
  <ul>
    <li v-for="(value, key) in student">{{ key }}：{{ value }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    fruits: ['apple', 'banana', 'orange'],
    student: {
      name: 'Tom',
      age: 18,
      gender: 'male'
    }
  }
})

Dalam kod di atas, arahan v-for digunakan untuk mengulangi tatasusunan dan objek masing-masing. Apabila melelaran ke atas tatasusunan, kami menamakan setiap elemen dalam tatasusunan fruit dan kemudian menggunakan pembolehubah itu secara langsung semasa membuat persembahan. Apabila melelaran ke atas objek, kami menggunakan tanda kurung untuk mengelilingi value dan key supaya kami boleh mendapatkan nilai dan kunci setiap sifat.

as Penggunaan

Secara lalai, sintaks arahan v-for adalah seperti berikut: v-for="item in items". item di sini ialah nama pembolehubah yang kami gunakan untuk merujuk kepada elemen yang sedang diulang. Untuk lebih memahami konsep ini, mari kita lihat contoh berikut:

<div id="app">
  <h1>默认情况下：</h1>
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
  <h1>使用 as 参数：</h1>
  <ul>
    <li v-for="fruit as f in fruits">{{ f }}</li>
  </ul>
</div>

Tidak seperti contoh sebelumnya, kami kini menggunakan parameter v-for bersama-sama dengan pembolehubah baharu dalam as Nama arahanf. Apabila kami menggunakan parameter as, kami juga boleh memilih nama pembolehubah baharu untuk merujuk elemen yang sedang diulang dalam templat. Dalam contoh ini, kita boleh menamakan elemen lelaran fruit dan kemudian menggunakan pembolehubah f untuk merujuknya dalam templat.

as Ciri ini memberikan fleksibiliti yang lebih besar untuk struktur gelung dalam Vue.js. Dalam sesetengah kes, anda boleh menjadikan kod anda lebih mudah dibaca dan diselenggara dengan memberikan elemen gelung anda nama yang unik. Nota tentang

as

Walaupun ciri as sangat berguna, terdapat beberapa perkara yang anda perlu beri perhatian apabila menggunakannya dalam amalan. Berikut adalah beberapa situasi yang perlu diberi perhatian:

1 Konvensyen Penamaan

Walaupun sah untuk menggunakan nama berubah v-for dalam as, kita harus mengelak daripada menggunakannya dalam konteks lain. Konvensyen penamaan ini. Sebabnya ialah as lebih mudah difahami sebagai awalan proprietari untuk menentukan nama pembolehubah. Oleh itu, jika anda menggunakan konvensyen penamaan ini di tempat lain, ia mungkin menghasilkan kod yang sukar difahami.

2. Penggunaan fungsi anak panah dalam as parameter

Apabila menulis dalam Vue.js, terutamanya menggunakan TypeScript, kadangkala kita perlu menggunakan fungsi anak panah untuk memetakan parameter as ke objek. Dalam kes ini, kita harus menyatakan secara eksplisit fungsi anak panah seperti berikut:

<div id="app">
  <ul>
    <li v-for="(fruit, index) => ({name: fruit, position: index}) as f">{{ f.name }}: {{ f.position }}</li>
  </ul>
</div>

Dalam contoh di atas, kami menggunakan fungsi anak panah untuk memetakan atribut name dan position kepada objek baharu. Ambil perhatian bahawa dalam contoh ini kami menggunakan kurungan di sekeliling fungsi anak panah untuk memberitahu Vue.js bahawa kami mentakrifkan peraturan pemetaan tersuai untuk parameter as.

Kesimpulan

Dalam artikel ini, kami memperkenalkan parameter pilihan v-for arahan as dalam Vue.js, yang memberikan lebih fleksibiliti untuk menentukan nama pembolehubah elemen lelaran. Walaupun ciri ini sangat berguna, kita masih perlu memberi perhatian kepada konvensyen penamaan dan cara memetakan objek ke parameter as apabila menggunakan fungsi anak panah.

Atas ialah kandungan terperinci Apakah maksud seperti dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!