Obiekt data w Vue
Podstawą komponentu są dane,
którymi będziemy manipulować.
Te dane są przechowywane w specjalnym
obiekcie data. Ten obiekt
powinien być zwracany jako wynik
specjalnej metody:
export default {
data() {
return {
}
}
}
Przechowujmy we właściwości obiektu z danymi jakiś tekst:
data() {
return {
text1: '111',
text2: '222',
}
}
Przechowywane dane można wyświetlać w widoku. Robi się to w podwójnych nawiasach klamrowych, w których pisze się nazwę właściwości, której wartość chcemy wyświetlić. Wyświetlmy wartości naszych właściwości:
<template>
{{ text1 }}
{{ text2 }}
</template>
A teraz zróbmy tak, aby każde z naszych wiadomości wyświetliło się w swoim akapicie:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Niech w data przechowuje się imię
i nazwisko użytkownika:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Wyświetl każdą właściwość w
osobnym tagu div.
