Как использовать переменные в Vue.js?
Как использовать переменные в Vue.js?
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 для вывода приветствия.
15