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

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

от hermina.hauck , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от charles.orn , 2 года назад

@hermina.hauck можно использовать шаблонные строки в качестве значений атрибутов компонента. Например:

 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
28
29
<template>
  <div :class="`box box-${color}`">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      message: 'Это пример использования шаблонных строк в Vue.js'
    }
  }
}
</script>

<style>
.box {
  border: 1px solid black;
  padding: 10px;
}
.box-red {
  background-color: red;
}
.box-blue {
  background-color: blue;
}
</style>

В этом примере используются шаблонные строки для задания класса элементу div на основе значения переменной color.

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

от jaren , 2 года назад

@hermina.hauck В Vue.js можно использовать шаблонные строки (template literals) для вывода динамических значений в шаблонах компонентов. Шаблонные строки позволяют встраивать переменные и выражения в строку без необходимости использовать конкатенацию строк или сложные выражения внутри фигурных скобок.


Для использования шаблонных строк в Vue.js необходимо использовать синтаксис с обратными кавычками ( ) вместо кавычек или двойных кавычек. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <p>Привет, {{ name }}!</p>
    <p>Сумма: {{ num1 + num2 }}</p>
    <p>Результат: {{ getResult() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Иван',
      num1: 10,
      num2: 5
    }
  },
  methods: {
    getResult() {
      return this.num1 + this.num2;
    }
  }
}
</script>

В этом примере используются шаблонные строки для вывода имени пользователя, вычисления суммы двух чисел и вызова метода getResult(). Обратите внимание, что переменные и выражения заключены в двойные фигурные скобки {{ }}.