Die data objek in Vue
Die basis van 'n komponent is die data
waarmee ons sal manipuleer.
Hierdie data word gestoor in 'n spesiale
objek data. Hierdie objek
moet teruggegee word as die resultaat
van 'n spesiale metode:
export default {
data() {
return {
}
}
}
Kom ons stoor 'n teks in 'n eienskap van die data objek:
data() {
return {
text1: '111',
text2: '222',
}
}
Die gestoorde data kan in die voorstelling vertoon word. Dit word gedoen in dubbele krulhakies, waarin die naam van die eienskap geskryf word, wie se waarde ons wil vertoon. Kom ons vertoon die waardes van ons eienskappe:
<template>
{{ text1 }}
{{ text2 }}
</template>
En laat ons nou maak dat elke een van ons boodskappe in sy eie paragraaf verskyn:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Laat in data die naam
en van van die gebruiker gestoor word:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Vertoon elke eienskap in 'n
aparte div tag.
