Аргументы

Аргументы

Некоторые директивы могут принимать «аргумент», разделённый от названия директивы двоеточием. Например, директива v-bind используется для реактивного обновления атрибутов HTML:

<a v-bind:href="url"> ... </a>

В данном случае href — аргумент, указывающий директиве v-bind связать атрибут href элемента со значением выражения url.

Другим примером будет директива v-on, которая отслеживает события DOM:

<a v-on:click="doSomething"> ... </a>

В данном случае аргументом является тип события. Подробнее на обработке событий мы остановимся позднее.

Динамические аргументы

Начиная с версии 2.6.0, можно использовать JavaScript-выражение в аргументе директивы, заключив его в квадратные скобки:

<!--
Обратите внимание, что есть некоторые ограничения для выражения аргументов,
подробнее об этом в разделе «Ограничения динамического выражения» ниже.
-->
<a v-bind:[attributeName]="url"> ... </a>

Здесь attributeName будет выполняться как выражение JavaScript, а его вычисленное значение использоваться в качестве финального значения аргумента. Например, если экземпляр Vue имеет в данных свойство attributeName, значение которого равно "href", то это будет эквивалентно привязке v-bind:href.

Таким же образом можно использовать динамические аргументы для привязки обработчика к динамическому имени события:

<a v-on:[eventName]="doSomething"> ... </a>

В этом примере, когда значение eventName будет "focus", то обработчик v-on:[eventName] будет эквивалентен v-on:focus.

Ограничения значений динамического аргумента

Ожидается, что динамические аргументы в результате будут строкой, за исключением null. Специальное значение null можно использовать для явного удаления привязки. Любые другие нестроковые значения будут вызывать предупреждения.

Ограничения динамического выражения

Для выражений динамических аргументов есть синтаксические ограничения, поскольку некоторые символы, такие как пробелы и кавычки, являются недопустимыми внутри имён атрибутов HTML. Например:

<!-- Подобное вызовет предупреждение компилятора. -->
<a v-bind:['foo' + bar]="value"> ... </a>

Обойти это ограничение можно использованием выражения без пробелов или кавычек, или заменой комплексного выражения на вычисляемое свойство.

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), следует избегать именования ключей заглавными буквами, поскольку браузеры будут приводить имена атрибутов к строчным:

<!--
В шаблонах DOM это преобразуется браузером в v-bind:[someattr].
Если в экземпляре не будет свойства "someattr", такой код не заработает.
-->
<a v-bind:[someAttr]="value"> ... </a>