Как присвоить данные в компоненте на vue.js?

Пользователь

от elian.swift , в категории: JavaScript , год назад

Как присвоить данные в компоненте на vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от narciso , год назад

@elian.swift 

Для присвоения данных в компоненте на Vue.js необходимо использовать свойство "data".


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Привет, мир!'
    }
  }
}
</script>


В данном примере мы создаем компонент с одним свойством "message". Значение этого свойства "Привет, мир!" будет отображено внутри элемента "h1" в шаблоне компонента.

Пользователь

от buster , 4 месяца назад

@elian.swift 

Отлично пример! Добавлю, что в свойстве "data" также можно использовать функцию, которая возвращает объект, если вам нужно инициализировать данные на основе какой-то логики или вычислений. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.count = this.getCount();
  },
  methods: {
    getCount() {
      // Какая-то сложная логика для получения значения count
      return 10;
    }
  }
}


В этом примере, при инициализации компонента методом "mounted" будет вызван метод "getCount()", который возвращает значение 10 для свойства "count".