Увод у приказивање листа у Вуе-у

Један од најчешћих задатака у веб развоју је рендеровање листа података. Вуе ово решава уз помоћ в-за директива. Истражићете шта је в-фор директива, како да уклоните ставке са листе и како да прикажете листе помоћу кључева.

Шта је в-фор директива у Вуе-у?

Тхе в-за директива је једна од Вуе-ових директива која вам омогућава да прикажете листе са минималним ЈаваСцрипт кодом. Тхе в-за директива функционише слично као и фор петља у ЈаваСцрипт-у и може итерирати низове и објекте да би приказао ставке на листи.

Да бисте искористили в-за директиве, обезбедите низ који желите да поновите у података власништво тхе Оптионс објецт ин Вуе.

На пример:

<шаблон>
<ул>
<лив-за="име у именима">{{ име }}ли>
ул>
шаблон>
<скрипта>
извоз подразумевано {
 дата() {
 врати {
 имена: ['Јован', 'Дое', 'Јамес'],
 };
 },
};
скрипта>

Горњи блок кода приказује пример Вуе апликације која користи в-за директива за понављање имена низ који је обезбеђен у података имовина.

в-за има вредност постављену на израз са два дела: променљивом итерације (име) и имена низ в-за указује на. Променљива итерације држи сваку име у имена низ и приказује име.

Вуе креира нову Модел објекта документа (ДОМ) елемент за сваку име у имена низ и приказује га на веб страници.

Ако је имена промене низа (на пример, додаје се ново име или се стари уклања), Вуе ће аутоматски ажурирати виртуелни ДОМ и поново приказати листу како би одражавао ажуриране податке.

Вуе такође нуди начин да добијете индекс елемента на листи.

<лив-за="(име, индекс) у именима">{{ име }} -- {{ индекс }}ли>

Код изнад приказује синтаксу за приказивање индекса сваког од њих име у имена низ.

Такође можете користити в-за директива за петљу кроз опсег бројева:

<лив-за="број у 10">Вуе је леполи>

Горњи код ће приказати листу са текстом Вуе је лепо десет пута. Тхе в-за директива такође може да прође кроз опсег бројева да би више пута приказала податке или извршила операцију. У овом случају, бр променљива итерације се користи за приступ тренутној ставци на листи.

Како уклонити ставке са листе у Вуе-у

Можете да дозволите корисницима да уклањају ставке са листа у вашој веб апликацији. Ова функција је корисна када правите апликације као што је листа обавеза.

Можете користити спајање ЈаваСцрипт метод (то је један од начина уклањање ставки из низова) да бисте уклонили ставку са листе у Вуе-у.

арраи.сплице (стартИндек, нумТоРемове, невЕлементс)

Метода спајања може додати или уклонити ставке из низа. Метода спајања узима параметре следећим редоследом:

1. Тхе стартИндек параметар поставља индекс на којем ће почети модификовање низа.
2. нумТоРемове означава број ставки које желите да уклоните из низа.
3. Коначно, невЕлементс параметар, који можете користити за додавање елемената у низ. Ако ниједан елемент није специфициран, спој () ће уклонити само елементе из низа.

Да бисте користили метод спајања за уклањање ставке са листе у Вуе-у, морате знати индекс те ставке. Један од начина да се то постигне је пролазак индекс као аргумент методи која управља уклањањем ставке.

На пример, можете додати дугме поред сваког имена у низу које покреће метод за уклањање ставке када корисник кликне на њу:

<шаблон>
<ул>
<лив-за="(име, индекс) у именима">
 {{ име }} -- {{ индекс }}
<дугме @клик="уклони ставку (индекс)">Уклонидугме>
ли>
ул>
шаблон>

Тхе индекс параметар нам даје приступ индексу сваког од њих име у низу, који овај програм прослеђује као аргумент у Обриши предмет методом. Тхе Обриши предмет метод онда може да користи спајање метод за уклањање а име од имена низ:

<скрипта>
извоз подразумевано {
 дата() {
 врати {
 имена: ['Јован', 'Дое', 'Јамес'],
 };
 },
 методе: {
 ремовеИтем (индекс) {
 тхис.намес.сплице (индекс, 1);
 }
}
};
скрипта>

Горња скрипта користи спајање метод за уклањање једног имена са листе рендерованих имена. Ово ће аутоматски ажурирати листу у корисничком интерфејсу како би одражавала ажурирани низ.

Како да прикажете листе помоћу кључева у Вуе-у

Тхе кључ атрибут је јединствени атрибут који Вуе користи за праћење идентитета сваке ставке на листи. Када се ставка на листи промени, уз помоћ кључ атрибут Вуе може брзо да ажурира ДОМ без поновног приказивања целе листе.

Хајде да погледамо пример приказивања листе са кључевима у Вуе-у:

<шаблон>
<див>
<ул>
<лив-за="име у именима":кеи="наме.ид">
 {{име.име}}
<дугме @клик="ремовеИтем (наме.ид)">Уклонидугме>
ли>
ул>
див>
шаблон>
<скрипта>
извоз подразумевано {
 дата() {
 врати {
 имена: [
 { ид: 1, име: "Јован"},
 { ид: 2, име: "Дое"},
 { ид: 3, име: "Џејмс"},
 ],
 };
 },
 методе: {
 ремовеИтем (кључ) {
 тхис.намес.сплице (кључ - 1, 1);
 },
 },
};
скрипта>

У овом примеру, имате листу ставки са јединственим ид својства. Блок кода користи кључ атрибут са в-за директива за праћење идентитета сваке ставке на листи. Ово омогућава Вуе-у да ефикасно ажурира ДОМ када се листа промени.

Ако бисте уклонили ставку са листе, Вуе би ажурирао ДОМ без потребе да поново приказује целу листу. То је зато што Вуе држи идентитет сваке ставке на листи и може да ажурира само ставке које су се промениле.

Тхе кључ атрибут треба да буде јединствени идентификатор за сваку ставку на листи. Ово може бити ан ид својство или било који други јединствени идентификатор који се може користити за праћење ставке.

Помоћу кључ атрибут са в-за директива помаже у избегавању проблема са приказивањем. На пример, када уклањате имена, Вуе користи кључ атрибут за одржавање редоследа ставки на листи.

Вуе директиве су неопходне

Овде сте покрили основе приказивања листа у Вуе-у, укључујући уклањање ставки са листа и приказивање листа помоћу кључева. Разумевањем ових концепата можете да направите одзивне интерфејсе који рукују сложеним листама података.

Вуе има мноштво директива за различите сврхе, укључујући условно приказивање, везивање догађаја и повезивање података. Разумевање ових директива може вам помоћи да направите ефикасне интерактивне веб апликације.