Rumah > Artikel > hujung hadapan web > 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:
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.
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
.
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!