@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
для вывода приветствия.