Тёмный

7 Ways to write better V-FOR LOOPS 

LearnVue
Подписаться 45 тыс.
Просмотров 22 тыс.
50% 1

Vue v-for loops are something that every project will use at some point or another. They allow you to write for loops in your Vue template code.
In this article, we’ll be covering some amazing ways to make your v-for code more precise, predictable, and efficient.
Think I missed some tips? Let me know in the comments down below your favorite v-for tricks!
CHAPTERS
0:00 Introduction
0:38 ALWAYS use a :key with v-for
1:09 Looping over a range with v-for
1:26 Avoid using v-if with v-for
2:09 Use computed or a method to filter your array
2:36 Use wrapper elements to conditionally render a whole list
3:00 Accessing the index in a v-for loop
3:22 How to Iterate Over an Object
3:58 Final thoughts
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vue-3-essentials-...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool
INTRO
Daily (Prod. by Lukrembo)
#Vue #VueJS #vfor

Опубликовано:

 

16 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 24   
@dickson710
@dickson710 Год назад
great as always, simple, clear and no BS
@asrorbekmannonov6838
@asrorbekmannonov6838 2 года назад
Iterating over object with "name in in object" it's super awesome 👍. I ve never seen this before
@jntaca
@jntaca 3 года назад
Great ! ! Thank a lot.
@jsomhorst
@jsomhorst 2 года назад
great content. But what I miss in this is a 8th tip. Let de API do the hard work. Filtering and such is best done (when having lots of data) to a server. It can utilize caching and such.
@LearnVue
@LearnVue 2 года назад
true!
@William_Clinton_Muguai
@William_Clinton_Muguai 2 года назад
Yap... Filtering with JS makes the loading time even longer, but the objective is to provide a fast mobile-app like experience.
@gilbertslam
@gilbertslam Год назад
I agree! Thanks for your input
@brunocmesquita
@brunocmesquita 3 года назад
Really great content
@LearnVue
@LearnVue 3 года назад
thank you! 😌
@QINISO-ZN
@QINISO-ZN Год назад
Your videos are incredibly consice and to the point. Liked and subscribed
@LearnVue
@LearnVue Год назад
thanks!
@demogyani2419
@demogyani2419 Год назад
There is one point that creator missed. In vue3.x V-IF has Higher precedence as compared to V-FOR
@MrBowmanXD
@MrBowmanXD 2 года назад
Good video keep it up
@LuckyStilet1
@LuckyStilet1 2 года назад
Whole v-for just in few clicks: I perfer assign key to index, when I am surtan that list length not gonna change. For that purpose I have shortcut even in Webstorm: f + tab ==> v-for="($item$, index) in $data$" :key="index" (this f + tab shorthand configured to work ONLY in vue template and ONLY in the tags) $data$ and $item$ - just places to navigate with tab after snippet was unwrapped.
@biplobshaha2829
@biplobshaha2829 Год назад
Great ❤❤
@erfansadeghinezhad9780
@erfansadeghinezhad9780 3 года назад
Nice video 😋
@LearnVue
@LearnVue 3 года назад
glad you liked it 😌
@christopheryeung9235
@christopheryeung9235 3 года назад
Good videos
@LearnVue
@LearnVue 3 года назад
thanks so much!
@augischadiegils.5109
@augischadiegils.5109 2 года назад
♥️♥️
@scorpi0000
@scorpi0000 Год назад
Thanks for the content
@devilfriend
@devilfriend 2 года назад
I want to know how to do a range loop in reverse order. For example, from 10 to 1.
@gilbertslam
@gilbertslam Год назад
Do it in a computed property.
@nnz13
@nnz13 5 месяцев назад
You must learn regexp one time and don't use useless libraries
Далее
3 Ways to Send Events with VUE EMIT
4:27
Просмотров 36 тыс.
3 Ways to Persist Pinia State
4:54
Просмотров 52 тыс.
13+ 2 серия
8:17
Просмотров 281 тыс.
A First Look at Nuxt SERVER COMPONENTS
4:50
Просмотров 13 тыс.
Make your own VUE DIRECTIVES in your app
6:26
Просмотров 10 тыс.
3 Ways to Build Better Vue Transitions
3:34
Просмотров 17 тыс.
Write Reusable Code with Vue DYNAMIC COMPONENTS
4:24
When to Use Ref vs. Reactive // Vue Tips
2:43
Просмотров 41 тыс.
Vue 3 + Firebase Authentication in 10 Minutes
9:06
Просмотров 58 тыс.
Python vs C++ Speed Comparison
1:04
Просмотров 1,9 млн