Как использовать переменные в Vue.js?

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

от sylvester , в категории: JavaScript , 7 месяцев назад

Как использовать переменные в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

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

@sylvester 

В Vue.js можно использовать переменные в шаблоне и скрипте компонента. Чтобы объявить переменную в компоненте, нужно использовать синтаксис объекта data, например:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>


Здесь переменная message объявлена в блоке data объекта компонента и используется в шаблоне с помощью двойных фигурных скобок {{ }}.


Также можно использовать переменные в вычисляемых свойствах и методах компонента. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="greet">Say hello</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    greet() {
      alert('Hello, ' + this.fullName + '!')
    }
  }
}
</script>


Здесь переменные firstName и lastName объявлены в блоке data компонента, а свойство fullName вычисляется на их основе в блоке computed. Метод greet использует свойство fullName для вывода приветствия.