Data-objekti Vue:ssa
Komponentin perustana ovat tiedot,
joiden kanssa aiomme manipuloida.
Nämä tiedot tallennetaan erityiseen
data-objektiin. Tämän objektin
tulisi palautua erityisen menetelmän
tuloksena:
export default {
data() {
return {
}
}
}
Tallennetaan data-objektin ominaisuuteen jokin teksti:
data() {
return {
text1: '111',
text2: '222',
}
}
Tallennettuja tietoja voidaan näyttää näkymässä. Tämä tehdään kaksoiskaarisulkeissa, joihin kirjoitetaan sen ominaisuuden nimi, jonka arvon haluamme näyttää. Näytetään ominaisuuksiemme arvot:
<template>
{{ text1 }}
{{ text2 }}
</template>
Tehdään nyt niin, että jokainen viesteistämme tulostuu omaan kappaleeseensa:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Olkoon data:ssa tallennettuna käyttäjän etu-
ja sukunimi:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Näytä kukin ominaisuus
erillisessä div-tagissa.
