Как использовать шаблонные строки в Vue.js?
Как использовать шаблонные строки в Vue.js?
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.
@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(). Обратите внимание, что переменные и выражения заключены в двойные фигурные скобки {{ }}.