Vue 2属性插值: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

时间:2022-05-28 16:40:07

Vue 2在组件模板上使用双大括号{{}}对属性赋值:

<div id="{{ item.id }}"></div>

报语法错误:

Vue template syntax error:
id="{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

原因是vue 2.x是不支持对属性使用插值{{}}的方式赋值,需使用v-bind指令或者v-bind的简写冒号“:”来指定属性。

v-bind指令

v-bind:id="item.id"

v-bind简写指令:

:id="item.id"

可以在指令表达式使用javascript,如拼接字符串my-和item.id

:id="'my-'+item.id"

ES6可以表示为:

:id="`my-${item.id}`"