MyTetra Share
Делитесь знаниями!
Вывод значения (текстовая интерполяция) в Vue
28.01.2018
13:27
Автор: br0ke
Текстовые метки: javascript, js, vue.js, vuejs, vue, mustache, syntax, double curly braces, интерполяция, вывод значения, фигурные скобки, v-once
Раздел: Информационные технологии - JavaScript - Vue

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


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


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


Выражение в фигурных скобках будет заменено значением свойства msg и обновлено при изменении значения. Для однократной интерполяции (без обновления) необходимо использовать директиву v-once:


<span v-once>Сообщение не будет обновлено: {{ msg }}</span>


В фигурных скобках можно производить однострочные (одно выражение JavaScript) несложные вычисления и вызывать любые JavaScript-функции. Свойства, методы и computed-свойства экземпляра Vue доступны в интерполяции прямо по своим именам (не this.msg, не data.msg, не this.data.msg, а просто msg).


{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>


А вот так НЕ сработает:


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

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


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования