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

Текст

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

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

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

Возможно также выполнение интерполяции однократно, которая не обновится при изменении данных — с помощью директивы v-once, но это повлияет сразу на все связанные переменные в рамках данного элемента:

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

Сырой HTML

Значение выражения в двойных фигурных скобках подставляется как простой текст, а не как HTML. Для HTML необходимо использовать директиву v-html:

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

Результат:

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

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

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

Выражения JavaScript

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

{{ number + 1 }}

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

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

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

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

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

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

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

Функции

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

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

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

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

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

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

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

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

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

<p>{{ computedString }}</p>