El objeto data en Vue
La base de un componente son los datos,
que manipularemos.
Estos datos se almacenan en un objeto
especial data. Este objeto
debe ser devuelto como resultado
de un método especial:
export default {
data() {
return {
}
}
}
Vamos a almacenar en una propiedad del objeto de datos algún texto:
data() {
return {
text1: '111',
text2: '222',
}
}
Los datos almacenados se pueden mostrar en la vista. Esto se hace entre dobles llaves, donde se escribe el nombre de la propiedad, cuyo valor queremos mostrar. Vamos a mostrar los valores de nuestras propiedades:
<template>
{{ text1 }}
{{ text2 }}
</template>
Y ahora hagamos que cada uno de nuestros mensajes se muestre en su propio párrafo:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Supongamos que en data se almacenan el nombre
y apellido del usuario:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Muestra cada propiedad en
una etiqueta div separada.
