Как Vue интерпретирует строковые и динамические значения атрибутов?

Question

Во Vue атрибут без : всегда считается строкой. Атрибут с : интерпретируется как JavaScript-выражение. Это правило действует для всех атрибутов, включая class, style, key и пользовательские пропсы. Непонимание этого часто приводит к логическим ошибкам. Для передачи значений из данных нужно использовать динамический биндинг.

YeaHub · Accepted Answer

Vue использует единое правило для интерпретации всех атрибутов в шаблоне.ОпределениеСтроковый атрибут — это значение, переданное как текстовый литерал.Динамический атрибут — это значение, вычисляемое как JavaScript-выражение.Строковые значенияЕсли атрибут указан без :: Vue передаст строку "hello", даже если в данных есть переменная с таким именем.Динамические значенияЕсли используется :: Vue возьмёт значение переменной message из контекста компонента.Типичные последствияИз-за этого различия:key="id" передаёт строку "id":key="id" передаёт значение переменной:disabled="false" реально отключает атрибутdisabled="false" всё равно включает disabledКраткий выводВо Vue все атрибуты без : — строки, а с : — выражения, и это правило нужно учитывать всегда.