Объект data в Vue
Основой компонента являются данные,
которыми мы будем манипулировать.
Эти данные хранятся в специальном
объекте data. Этот объект
должен возвращаться результатом
специального метода:
export default {
data() {
return {
}
}
}
Давайте будем хранить в свойстве объекта с данными какой-нибудь текст:
data() {
return {
text1: '111',
text2: '222',
}
}
Хранимые данные можно выводить в представлении. Это делается в двойных фигурных скобках, в которых пишется имя свойства, значение которого мы хотим вывести. Давайте выведем значения наших свойств:
<template>
{{ text1 }}
{{ text2 }}
</template>
А теперь сделаем так, чтобы каждое из наших сообщений вывелось в своем абзаце:
<template>
<p>{{ text1 }}</p>
<p>{{ text2 }}</p>
</template>
Пусть в data хранится хранится имя
и фамилия пользователя:
data() {
return {
name: 'john',
surn: 'smit',
}
}
Выведите каждое свойство в
отдельном теге div.