# Интерполяции

## Текст

Наиболее простой способ связывания данных — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок):

```javascript
<span>Сообщение: {{ msg }}</span>
```

Выражение в фигурных скобках будет заменено значением свойства `msg` соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.

Возможно также выполнение интерполяции однократно, которая не обновится при изменении данных — с помощью [директивы v-once](/vue/direktivy/v-once.md), но это повлияет сразу на все связанные переменные в рамках данного элемента:

```markup
<span v-once>Это сообщение никогда не изменится: {{ msg }}</span>
```

## Сырой HTML

Значение выражения в двойных фигурных скобках подставляется как простой текст, а не как HTML. Для HTML необходимо использовать [директиву `v-html`](/vue/direktivy/v-html.md):

```markup
<p>Двойные фигурные скобки: {{ rawHtml }}</p>
<p>Директива v-html: <span v-html="rawHtml"></span></p>
```

Результат:

<div align="left"><img src="/files/-LwTzb-RpD-LWwDgMG8T" alt=""></div>

Содержимое тега `span` будет заменено значением свойства `rawHtml`, интерпретированного как обычный HTML — все привязки данных игнорируются.&#x20;

Нельзя использовать `v-html` для вложения шаблонов друг в друга, потому что движок шаблонов Vue не основывается на строках. Вместо этого нужно использовать компоненты, позволяющие сочетать и переиспользовать элементы UI.

Динамическая отрисовка произвольного HTML-кода на сайте крайне опасна, так как может легко привести к XSS-уязвимостям.&#x20;

## Выражения JavaScript

При связывании данных Vue поддерживает всю мощь выражений JavaScript:

```markup
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
```

Выражения будут вычислены как JavaScript-код в области видимости соответствующего экземпляра Vue. Единственное ограничение в том, что допускается лишь **одно выражение**, поэтому код ниже **НЕ** сработает:

```markup
<!-- это не вычисляемое выражение, а определение переменной: -->
{{ var a = 1 }}

<!-- операторы условий не сработают, используйте условные операторы в тернарной форме: -->
{{ if (ok) { return message } }}
```

Выражения в шаблонах выполняются в режиме «песочницы», поэтому доступ есть только к ограниченному списку глобальных объектов, таким как `Math` и `Date`. Не нужно пытаться получить доступ к пользовательским глобальным объектам внутри выражений используемых в шаблонах.

## Функции

В интреполяции можно использовать как методы так и вычисляемые значения

```javascript
var example1 = new Vue({
  el: '#example-1',
  
  methods: {
    returnString() {
      return 'Hello from methods';
    }
  }
})
```

```markup
<p>{{ retrunString() }}</p>
```

В функцию можно передавать значение

```javascript
var example1 = new Vue({
  el: '#example-1',
  
  methods: {
    predicate(value) {
      return value;
    }
  }
})
```

```markup
<p>{{ predicate('i'm returned string') }}</p>
```

Можно использовать computed свойства

```javascript
var example1 = new Vue({
  el: '#example-1',
  
  computed: {
    computedString() {
      return 'Hello from computed';
    }
  }
})
```

Но вызывать уже не нужно:

```markup
<p>{{ computedString }}</p>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://d-ukolov.gitbook.io/vue/basics/sintaksis-shablonov/interpolyacii.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.